YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Put JavaScript at bottom

前端性能优化:Put JavaScript at bottom

之前介绍过YSlow前端性能优化的一条规则是将CSS放在HTML文档顶部,今天要介绍的规则是:Put JavaScript at bottom(将JavaScript放到HTML文档底部)。将JavaScript放到HTML文档底部,正好跟CSS放置的位置相反。那为什么要这么做呢?

脚本阻塞下载

Put JavaScript at bottom 主要原因是在浏览器下载脚本的时候,浏览器不会下载其它的页面组件。造成的直接后果就是,在脚本下载并执行完成之前,位于脚本后面的内容浏览器是不会加载解析的。页面位于脚本下发的内容不会解析,就会出现空白的区域。脚本在HTML文档的位置越靠前,页面出现空白区域就越多。给用户的感觉就是页面卡住了,页面加载慢(尤其是在加载的脚本体积很大,同时又需要执行处理很多初始化DOM操作)。

脚本阻塞下载的原因

脚本阻塞下载其中一个原因是,脚本可能使用document.write来修改页面内容,因此浏览器会等待脚本加载完毕,确保页面能够恰当的布局。而另一个原因是,为了保证脚本能够按照正确的顺序执行(摘选至《High Performance Web Sites》)。

就目前看来,出现脚本阻塞下载,应该是算浏览器为了确保JavaScript脚本能够正确执行必须要做的事情,我们无法避免。除非页面中没有任何脚本。

为什么要 Put JavaScript at bottom

其实,在了解脚本阻塞下载的原理后,为什么要 Put JavaScript at bottom 的答案就很明显了。Put JavaScript at bottom 就是为了避免脚本阻塞下载而影响浏览器流畅的逐步解析页面。这一点跟 Put CSS at top 的目的是一样的。

这里要比较一下的是,如果 Put CSS at bottom,屏幕出现白屏是浏览器为避免样式发生变化时重绘页面中的元素,浏览器会阻塞内容逐步呈现。而 Put JavaScript at top 会出现白屏,则是因为浏览器为了确保脚本能够正确执行,浏览器会阻塞其他元素的下载,从而阻塞内容逐步呈现。

将脚本放在正确的位置

为了避免脚本阻塞下载带来不好的用户体验,优化前端性能,我们应该将脚本放在页面底部,而且最理想的位置是尽量靠近</body>标签的位置。

不过,在很多情况下,我们很难做到将全部的脚本都放在页面底部。例如一些来自广告商的广告脚本代码,我们不可能都将广告展示在页面底部。再例如为了让IE底版本的浏览器支持HTML5新增加的标签,我们必须把生成HTML5 DOM元素的脚本放置在HEAD标签区域里。

所以,脚本放置位置还是要根据实际的应用环境来放置到正确的位置。但是,能放到页面底部的脚本,我们都应该放置到HTML文档底部。

延时加载脚本

延时加载脚本是我们会常听到的一个关于加载脚本的优化建议,而且 IE 浏览器中在<script>标签中加入 defer属性:<script src="js/jquery.js" type="text/javascript" defer><script>,就可以实现延长加载。不过很遗憾,目前仅仅在IE浏览器中支持。而且,可以延迟加载的脚本,都可以(也应该)将它们放在页面底部。因此,(个人的观点)延时加载脚本意义不大。

其实,在了解了脚本阻塞加载的原理后,我们采取 Put JavaScript at bottom,就是为了让脚本在所有页面元素解析完成后再加载执行脚本,尽量减少阻塞的元素数量,让脚本加载和执行的时间靠后。简单说,就是让浏览器先把用户最关心的数据信息显示出来,再处理(用户通常在页面上直接看不到的)脚本。这种处理方式,其实也算的上是一种“延时加载”吧。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Put JavaScript at bottom

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)