web性能优化之---JavaScript中的无阻塞加载性能优化方案

Posted leaf930814

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web性能优化之---JavaScript中的无阻塞加载性能优化方案相关的知识,希望对你有一定的参考价值。

一、js阻塞特性

  JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的。 即<script>每次出现都会让页面等待脚本的解析和执行(不论JS是内嵌的还是外链的),JS代码执行完成后,才继续渲染页面。

 

二、优化方案

1、尽管脚本的下载过程并不会相互影响,但页面仍然必须等待所有JS下载并执行完成才能继续。所以尽可能将所有<script>标签放置在页面底部,紧靠关闭标签</body>的上方。此方法可以保证页面在脚本运行之前完成解析。

注意:CSS文件本身是并行下载,不会阻塞页面的其他进程。但是,如果把一段内嵌脚本放在引用外链CSS的<link>之后会导致页面阻塞去等待CSS的下载。这样做是为了确保内嵌脚本在执行时能够获得正确的样式信息。所以,最好不要把内嵌脚本放在CSS的<link>之后。

2、减少外链接数量,减少请求。可以将脚本成组打包,这点现在的构建工具已经做得很好了。页面的<script>标签越少,页面的加载速度就越快,响应也更迅速。不论外部脚本文件还是内联代码都是如此。

3、有几种方法可以使用非阻塞方式下载javascript

1 ) .为<script>标签添加defer属性(仅IE和Firefox3.5以上)
2).动态创建<script>元素,用它下载并执行代码

3) . 在页面加载完成后才加载JS,即在window对象的load事件触发后在下载脚本。

4) .使用如common.js等js模块管理工具去动态加载js,比如在点击操作时候加载一个js模块。
5).用XHR对象下载代码,并注入到页面



以上是关于web性能优化之---JavaScript中的无阻塞加载性能优化方案的主要内容,如果未能解决你的问题,请参考以下文章

前端性能优化之 Composite

JavaScript性能优化之摇树

转网站前端性能优化之javascript和css

web性能优化之浏览器网页渲染原理

JavaScript性能优化之事件委托

性能优化之无阻塞加载脚步方法比较