第一条定律:将脚本放在底部;
第二条定律:减少引用外部脚本文件的数量(可通过一个打包工具实现“YUI Compressor);
第三条定律:延期脚本;
<script type="text/javascript" src="file1.js" defer></script>
第四条定律:动态脚本元素;
var script = document.createElement ("script");
script.type = "text/javascript";
script.src = "file1.js";
document.getElementsByTagName_r("head")[0].appendChild(script);
function loadScript(url, callback){
var script = document.createElement ("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName_r("head")[0].appendChild(script);
}
推荐的向页面加载大量JavaScript 的方法分为两个步骤:第一步,包含动态加载JavaScript 所需的代码,
然后加载页面初始化所需的除JavaScript 之外的部分。这部分代码尽量小,可能只包含loadScript()函数,
它下载和运行非常迅速,不会对页面造成很大干扰。当初始代码准备好之后,用它来加载其余的JavaScript。
例如:
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
loadScript("the-rest.js", function(){
Application.init();
});
</script>
YUI 3 的核心设计理念为:用一个很小的初始代码,下载其余的功能代码。要在页面上使用YUI 3,首
先包含YUI 的种子文件:
<script type="text/javascript"
src=http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js></script>
YUI().use("dom", function(Y){
Y.DOM.addClass(docment.body, "loaded");
});
作为一个更通用的工具,Yahoo! Search 的Ryan Grove 创建了LazyLoad 库
。LazyLoad 是一个更强大的loadScript()函数。LazyLoad 精缩之后只有大
约1.5KB(精缩,而不是用gzip 压缩的)。用法举例如下:
<script type="text/javascript" src="lazyload-min.js"></script>
<script type="text/javascript">
LazyLoad.js("the-rest.js", function(){
Application.init();
});
</script>
<script type="text/javascript" src="lazyload-min.js"></script>
<script type="text/javascript">
LazyLoad.js(["first-file.js", "the-rest.js"], function(){
Application.init();
});
</script>
另一个非阻塞JavaScript 加载库是LABjs(http://labjs.com/),Kyle Simpson 写的一个开源库,由Steve
Souders 赞助。此库对加载过程进行更精细的控制,并尝试并行下载尽可能多的代码。LABjs 也相当小,只
有4.50KB(精缩,而不是用gzip 压缩的),所以具有最小的页面代码尺寸。用法举例:
<script type="text/javascript" src="lab.js"></script>
<script type="text/javascript">
$LAB.script("the-rest.js")
.wait(function(){
Application.init();
});
</script>