js的定律

第一条定律：将脚本放在底部；

第二条定律：减少引用外部脚本文件的数量（可通过一个打包工具实现“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>