高性能JS编程之加载与运行
原则:
第一条定律:将脚本放在底部——
因为脚本阻塞其他页面资源的下载过程,所以推荐的办法是:将所有
<script>
标签放在尽可能接近
<body>
标签底部的位置,尽量减少对整个页面下载的影响。
保证页面在脚本
运行之前完成解析
第二条
定律:
限制页面的
<script>
总数——
由于每个
<script>
标签下载时阻塞页面解析过程,所以限制页面的
<script>
总数也可以改善性能。这个规
则对内联脚本和外部脚本同样适用。
通过一个打包工具实现将多个JS文件打包为一个。
页面的
<script>
标签越少,页面的加载速度就越快,响应也更加迅速。
过程分析:
JavaScript具有阻塞特征,当JavaScript 运行时其他的事情不能被浏览器处理,这意味着<script>标签的出现使整个页面因脚本解析、运行而出现等待。当浏览器遇到一个<script>标签时,无法知JavaScript 是否在<p>标签中添加内容。因此,浏览器停下来,运行此JavaScript 代码,然后再继续解析、翻译页面。同样的事情发生在使用src 属性加载JavaScript 的过程中。浏览器必须首先下载外部文件的代码,这要占用一些时间,然后解析并运行此代码。此过程中,页面解析和用户交互是被完全阻塞的。
非阻塞脚本的秘密在于,等页面完成加载之后,再加载
JavaScript
源码。从技术角度讲,这意味着在
window
的
load
事件发出之后开始下载代码。
1、
如目标浏览器只包括
Internet Explorer
和
Firefox 3.5,添加
defer
属性可支出JS并行下载。
任何带有
defer
属性的
<script>
元素在
DOM
加载完成之前不会被执行,不论是内联脚本还是外部脚本文
件。
2、
动态创建
<script>
元素,用它下载并执行代码
3、
用
XHR
对象下载代码,并注入到页面中
非阻塞
JavaScript
加载库是
LABjs
(
http://labjs.com/
),
$LAB.script()
函数用于下载一个
JavaScript
文件,
$LAB.wait()
函数用于指出一个函数,该函数等待文件
下载完成并运行之后才会被调用。
LABjs
的独特之处在于它能够管理依赖关系,
LABjs
通过
wait()
函数允许你指定哪些文件应该等待其他文件。