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

最新推荐文章于 2021-04-03 14:19:11 发布
最新推荐文章于 2021-04-03 14:19:11 发布
阅读量338 收藏 1
点赞数
分类专栏： performance
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_3843/article/details/82636600
版权
在页面渲染时，js跟css渲染时的顺序恰好相反，浏览器会先下载js脚本，然后再下载js脚本后面的组件，这样渐进式渲染会阻塞脚本下面的所有元素，将脚本移到页面底部的方式可以解决这个问题。

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


[img]http://dl2.iteye.com/upload/attachment/0109/7658/76eb929c-1d01-33b3-8168-42a37b0592fc.png[/img]
iteye_3843
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
高性能网站建设指南2 中文版 高性能网站建设指南(中文版)
01-19
　《高性能网站建设指南》一书介绍了如何针对网站中的Ajax、CSS、JavaScript、Flash和图片进行性能优化。每个性能规则都提供了示例，在本书的配套网站上可以找到代码片段。这些规则包括： 　•减少HTTP请求　•使用...
高性能网站建设指南1
01-19
　《高性能网站建设指南》一书介绍了如何针对网站中的Ajax、CSS、JavaScript、Flash和图片进行性能优化。每个性能规则都提供了示例，在本书的配套网站上可以找到代码片段。这些规则包括： 　•减少HTTP请求　•使用...
高性能web建站规则（将js放在页面底部）
沉默王二
06-01 2367
简单解释一下为什么要将js放在页面底部： 浏览器只能顺序加载js组件，并且一次只下载一个。假如js放在页面顶部，那么js后的组件则必须等待js下载完后再进行加载。 这和css放在页面顶部刚好相反，但作用却完全相同，能够让页面逐步呈现给用户！...
把Javascript脚本放到页面的底部的好处
duanll1985的专栏
05-10 348
[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...
为什么要将script脚本放在body底部
大鱼吃小鱼7的博客
07-18 3649
文章目录 一、从一个面试题说起 “页面渲染出来了” 指的是什么？ 陷阱 二、浏览器的渲染机制 几个概念 浏览器的渲染过程 看 Timeline，一目了然 三、问题的答案 四、总结、再进一步 说明： 本文提到的浏览器均是指Chrome。 “script标签“指的都是普通的不带其他属性的外联javascript。 web性能优化的手段并不是非黑即...
为什么将js脚本放在底部而不是头部
ForMyQianDuan的博客
10-15 2830
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
【js】javascript脚本放在 ＜body＞元素的底部的好处
向着光芒的女孩
04-11 1362
建议把javascript脚本放在 <body> 元素的底部。 这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。MDN的解释： 提示：我们将 <script> 元素放在 HTML 文件底部的原因是，浏览器解析 HTML 似乎按照代码出现的顺序来的。如果 JavaScript被首先读取，它也应该影响下面的 HTML，但有时会出现问题，因为 JavaScript 会在 HTML 之前被
[高性能网站建设指南——前端工程师技能精粹(英文原版)].pdf
11-12
《高性能网站建设指南——前端工程师技能精粹》是前端开发领域的一本重要著作，它由Steve Souders撰写，旨在提供一套实用的策略和技巧，帮助网站优化性能，提高加载速度和用户体验。这本书不仅受到业界知名专家如Joe...
[Q&A] 为什么把js脚本放到html页面的底部？
A5656665656556的博客
07-26 148
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...
$(function(){})的作用， js文件放底部
mozuncangtianbaxue的博客
12-12 9966
转载自：https://zhidao.baidu.com/question/807876639619633612.html jQuery语句必须放在$(function(){});里面吗 发现写个jQuery放在其它里面就是没有反应,必须放在$(function(){}):里面才会起作用,或者其他地方的jQuery必须被$(function(){}):调用,难道其他地方不行?
为什么CSS放头部，JS放底部
小马过河
12-25 4233
CSS放头部，JS放底部，这样可以提高页面的性能。然而，为什么呢？原因如下： CSS 不会阻塞 DOM 的解析，但会阻塞 DOM 渲染。 JS 阻塞 DOM 解析，但浏览器会"偷看"DOM，预先下载相关资源。 浏览器遇到 &lt;script&gt;且没有defer或async属性的 标签时，会触发页面渲染，因而如果前面CSS资源尚未加载完毕时，浏览器会等待它加载完毕在执行脚本。 这就是为何...
js 是放在head还是放在body底部其实是有本质区别的
zwy122的博客
12-28 2067
html页面中js放在head部分，也就是整个html一开始就加载的方式，和放在body底部的方式，也就是在html页面最后再加载，对于有些情况下是有本质区别的，详见前端view文件夹中临床界面的hospital.html界面对于下拉菜单控件的加载方式，也就是现在处于body部分的js加载的内容，把他移动到head部分是有本质区别的
网站为什么 JS 调用尽量放到网页底部？
ywb201314的专栏
11-15 7000
作者：igetit 链接：https://www.zhihu.com/question/34147508/answer/63068656 来源：知乎 著作权归作者所有，转载请联系作者获得授权。 这是个Meta级别的好问题！如果你想把web前端性能优化到极致，一定要认真地去了解这个原则背后的原理，而非表面的技巧。 （已完结，转载请署名，否则保留追究的权利） 事实上，如果对we
前端4-3-1：web页面级优化
Yummy的博客
04-03 322
web页面级优化 减少HTTP请求的次数。http协议是无状态的应用层协议，每次http请求都需要建立通信链路、进行数据传输，而在服务器端每个http都需要启动独立的线程去处理，这些通信和服务的开销都很昂贵。所以减少http请求的数目可有效提高访问性能。 进行资源合拼和压缩。合并CSS、合并javascript、合并图片，将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。
JavaScript 性能
qq_42848534的博客
07-03 103
如何加速您的 JavaScript 代码。 减少循环中的活动 编程经常会用到循环。 循环每迭代一次，循环中的每条语句，包括 for 语句，都会被执行。 能够放在循环之外的语句或赋值会使循环运行得更快。 差的代码： var i; for (i = 0; i < arr.length; i++) { 更好的代码： var i; var l = arr.length; for (i = 0; i < l; i++) { 循环每次迭代时，坏代码就会访问数组的 length 属性。 好代码在循环之外访
高性能网站优化实践指南
压缩CSS和JavaScript代码可以减少文件大小，同时将CSS放在头部，JavaScript放在底部，可以确保页面呈现的同时进行脚本加载，避免阻塞渲染。 7. **缓存利用** 利用HTTP缓存机制，设置合适的过期时间，可以减少对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值