高性能web网站优化原则6——把js脚本放在页面底部

最新推荐文章于 2021-08-29 10:26:20 发布
原创 最新推荐文章于 2021-08-29 10:26:20 发布 · 430 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文讨论了在页面渲染时，JavaScript脚本与CSS样式表加载顺序的问题，建议将脚本移动到页面底部以避免阻塞后续元素加载，通过实例展示了不同脚本加载位置对页面元素渲染的影响。
在页面渲染时，js跟css渲染时的顺序恰好相反，浏览器会先下载js脚本，然后再下载js脚本后面的组件，这样渐进式渲染会阻塞脚本下面的所有元素，将脚本移到页面底部的方式可以解决这个问题。

如下图所示，js下载时间需要大约10s，js分别放在三个不同的位置，页面顶部，中间和底部，页面渲染元素的区别，一目了然。


[img]http://dl2.iteye.com/upload/attachment/0109/7658/76eb929c-1d01-33b3-8168-42a37b0592fc.png[/img]
[高性能网站建设指南——前端工程师技能精粹(英文原版)].pdf
11-12
《高性能网站建设指南——前端工程师技能精粹》是前端开发领域的一本重要著作，它由Steve Souders撰写，旨在提供一套实用的策略和技巧，帮助网站优化性能，提高加载速度和用户体验。这本书不仅受到业界知名专家如Joe...
精选资源
Web前端大作业——基于HTML+CSS+JavaScript仿英雄联盟LOL游戏网站
08-10
6. **兼容性与优化**：考虑到兼容性问题，项目中的代码经过优化，能够在各种主流浏览器中稳定运行，包括Chrome、Firefox、Safari等。 #### 三、技术实现与工具使用 1. **HTML5**：作为项目的基石，HTML5提供了丰富...
高性能web建站规则（将js放在页面底部）
沉默王二
06-01 2432
简单解释一下为什么要将js放在页面底部： 浏览器只能顺序加载js组件，并且一次只下载一个。假如js放在页面顶部，那么js后的组件则必须等待js下载完后再进行加载。 这和css放在页面顶部刚好相反，但作用却完全相同，能够让页面逐步呈现给用户！...
网站为什么 JS 调用尽量放到网页底部？
ywb201314的专栏
11-15 7167
作者：igetit 链接：https://www.zhihu.com/question/34147508/answer/63068656 来源：知乎 著作权归作者所有，转载请联系作者获得授权。 这是个Meta级别的好问题！如果你想把web前端性能优化到极致，一定要认真地去了解这个原则背后的原理，而非表面的技巧。 （已完结，转载请署名，否则保留追究的权利） 事实上，如果对we
把Javascript脚本放到页面的底部的好处
duanll1985的专栏
05-10 414
[size=medium]转自：http://developer.yahoo.com/performance/rules.html#js_bottom Put Scripts at the Bottom tag: javascript [size=x-small] The problem caused by scripts is that they block parallel d...
[Q&A] 为什么把js脚本放到html页面的底部？
A5656665656556的博客
07-26 210
Images from different serverscan be downloaded more than two at atime, but once your browser encounters a<script> tag, it can no longer downloadmultiple items in parallel. Having them a...
WEB开发编码原则：优化Javascript文件,并将其放到页面底部
weixin_34334744的博客
08-16 116
为什么80%的码农都做不了架构师？>>> ...
高性能网站建设指南：提升网站速度的14条优化原则
《高性能网站建设指南》是一本系统性阐述现代Web开发中性能优化核心理念与实践方法的重要著作，聚焦于提升网站加载速度、响应效率及用户体验。随着Web 2.0时代的深入发展，网页内容日益丰富，动态交互频繁，用户对...
高性能网站建设与前端优化技术精髓
高性能网站建设是现代Web开发中的核心议题，尤其是在Web2.0时代背景下，用户对网页加载速度、交互流畅性和响应即时性的要求日益提升。《高性能网站建设指南 前端工程师技能精髓》一书系统性地梳理了前端性能优化的...
提升网站性能的前端实战指南——《High Performance Web Sites》精华
6. **把脚本放在底部**：延迟加载非阻塞JavaScript，或者将其放置在页面底部，让主要内容先加载，可以改善用户体验。 7. **压缩内容**：启用服务器端的Gzip压缩，可以大幅减少发送到客户端的数据量。 8. **使用CDN...
网站优化方式--页面加载速度优化方式汇总
Sparrowflying的博客
04-27 454
1、优化图片对于代码所占空间来说，图片是一个庞然大物，可精简空间非常大。主要有以下几方面要注意：（1）在能保证清晰度的情况下，图片要尽可能小。要根据图片内容合理采用png，jpg，gif不同方式压缩。不要一味采用png，同样满足要求的 jpg 可能只有 png 大小的几十分之一；（2）将一个页面的多个小图标合并为一张雪碧图。好处：减少文件大小；减少HTTP请求次数。2、优化 CSS 文件将css文...
如何使JS运行在文件底部
weixin_44211097的博客
08-29 407
1.script引入外部文件放在body底部 <body> <div class="a"></div> <script src="./a.js"></script> </body> 2.script放到顶部，加async ---------同时执行 <head> <script src="./a.js" async></script> </head&...
js 是放在head还是放在body底部其实是有本质区别的
zwy122的博客
12-28 2187
html页面中js放在head部分，也就是整个html一开始就加载的方式，和放在body底部的方式，也就是在html页面最后再加载，对于有些情况下是有本质区别的，详见前端view文件夹中临床界面的hospital.html界面对于下拉菜单控件的加载方式，也就是现在处于body部分的js加载的内容，把他移动到head部分是有本质区别的
为什么将js脚本放在底部而不是头部
ForMyQianDuan的博客
10-15 2920
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
为什么要将script脚本放在body底部
大鱼吃小鱼7的博客
07-18 3863
文章目录 一、从一个面试题说起 “页面渲染出来了” 指的是什么？ 陷阱 二、浏览器的渲染机制 几个概念 浏览器的渲染过程 看 Timeline，一目了然 三、问题的答案 四、总结、再进一步 说明： 本文提到的浏览器均是指Chrome。 “script标签“指的都是普通的不带其他属性的外联javascript。 web性能优化的手段并不是非黑即...
$(function(){})的作用， js文件放底部
热门推荐
mozuncangtianbaxue的博客
12-12 1万+
转载自：https://zhidao.baidu.com/question/807876639619633612.html jQuery语句必须放在$(function(){});里面吗 发现写个jQuery放在其它里面就是没有反应,必须放在$(function(){}):里面才会起作用,或者其他地方的jQuery必须被$(function(){}):调用,难道其他地方不行?
为什么CSS放头部，JS放底部
小马过河
12-25 4324
CSS放头部，JS放底部，这样可以提高页面的性能。然而，为什么呢？原因如下： CSS 不会阻塞 DOM 的解析，但会阻塞 DOM 渲染。 JS 阻塞 DOM 解析，但浏览器会"偷看"DOM，预先下载相关资源。 浏览器遇到 &lt;script&gt;且没有defer或async属性的 标签时，会触发页面渲染，因而如果前面CSS资源尚未加载完毕时，浏览器会等待它加载完毕在执行脚本。 这就是为何...
【js】javascript脚本放在 ＜body＞元素的底部的好处
向着光芒的女孩
04-11 1454
建议把javascript脚本放在 <body> 元素的底部。 这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。MDN的解释： 提示：我们将 <script> 元素放在 HTML 文件底部的原因是，浏览器解析 HTML 似乎按照代码出现的顺序来的。如果 JavaScript被首先读取，它也应该影响下面的 HTML，但有时会出现问题，因为 JavaScript 会在 HTML 之前被
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值