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


Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题。

在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 。原因是,事实上,大多数浏览器使用单进程处理UI和更新Javascript运行等多个任务,而同一时间只能有一个任务被执行。Javascript运行了多长时间,那么在浏览器空闲下来响应用户交互之前的等待时间就有多长。

从基本层面说,这意味着<script>标签的出现使整个页面因脚本解析、运行而出现等待。不论实际的 JavaScript 代码是内联的还是包含在一个不相干的外部文件中,页面下载和解析过程必须停下,等待脚本 完成这些处理,然后才能继续。这是页面生命周期必不可少的部分,因为脚本可能在运行过程中修改页面 内容。典型的例子是 document.write()函数,例如:

http://github.com/rgrove/lazyload/ )。LazyLoad是一个强大的loadScript()函数。LazyLoad精缩之后只有大约1.5KB。用法举例如下:
复制代码 代码如下:

 <script type="text/javascript" src="lazyload-min.js"></script>
 <script type="text/javascript">
   LazyLoad.js("the-rest.js", function(){
     Application.init();
   });
 </script>

Summary 总结

1.将所有<script>标签放置在页面底部,紧靠关闭标签</body>的上方。此方法可以保证页面在脚本运行之前完成解析。

2.将脚本成组打包。页面的<script>标签越少,页面的加载速度就越快,响应也更迅速。不论外部脚本文件还是内联代码都是如此。

3.有几种方法可以使用非阻塞方式下载Javascript:

1).为<script>标签添加defer属性
2).动态创建<script>元素,用它下载并执行代码
3).用XHR对象下载代码,并注入到页面

通过上述策略,可以极大提高那些使用Javascript代码的网友应用的实际性能。

参考书籍《高性能Javascript》。


« 
» 

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3