高性能javascript笔记：关于脚本的优化

脚本的阻塞特性：把脚本放在底部

因为脚本阻塞其他页面资源的下载，所以推荐的方法就是：将所有的<script>标签放在尽可能接近<body>标签底部的位置即</body>之前。尽量减少对整个页面下载的影响。

减少脚本的数量

当页面解析每碰到一个<script>时，紧接着都会有一段时间用于js代码的运行，最小化这些延迟时间可以改善页面的性能。另外，对于外部js文件，会发出http请求，每个http请求都会产生额外的性能，下载一个100k的js文件要比下载4个25k的js文件要快，所以合并js有助于改善页面的性能。

精简js源代码及压缩脚本(gzip)

精简js源代码是指去除一个js文件中一切与运行无关的内容，包括注释和不必要的空格，使js源文件体积更小，下载更快。推荐使用JSMin和Dojo Compressor；压缩脚本需要在服务器做相应的配置，同样适用于样式表。

非阻塞加载脚本

非阻塞加载脚本是等页面加载完后再加载Javascript源码。从技术角度来说，这意味着在window的load事件发出后开始下载脚本。
延迟脚本：HTML4为<script>添加了一个defer属性，这个属性指明该脚本不会修改DOM，所以代码可以稍后执行。仅IE和FF3.5支持，其他浏览器依然阻塞。代码如下

<script type="text/javascript" src="file.js" defer="defer"></script>

任何支持带有defer属性的<script>元素在DOM加载完之前是不会被执行的，不管是内联脚本还是外部文件，所以它可以放到页面的任何位置。

动态添加脚本元素：<script>元素与其它元素一样，可以通过Javascript从文档中添加，移动，删除。代码如下

1 var script = document.createElement("script");
2 script.type = "text/javascript";
3 script.onload=function(){
4      //表示已经加载完
5 };
6 script.src = "file.js";
7 document.getElementsByTagName("head")[0].appendChild(script);

file.js文件当元素添加到页面后立刻开始下载，重点在于无论在何处启动下载，文件的下载和运行都不会阻塞其他页面资源的处理。因为可能要经常使用到，所以可以封装成一个跨浏览器的函数，方便以后使用：

 1 function asyncLoadScript(url,callback){
 2     var script = document.createElement("script");
 3     script.type = "text/javascript";
 4     if(script.readyState){//ie
 5         script.onreadystatechange = function(){
 6             if(script.readyState == "loaded" || script.readyState == "complete"){
 7                 script.onreadystatechange = null;
 8                 callback();
 9             }
10         }
11     }else{//other
12         script.onload = function(){
13             callback();
14         };
15     }
16     script.src = url;
17     document.body.appendChild(script);
18 }
19 //加载多个js，保证其顺序
20 asyncLoadScript("file1.js",function(){
21     asyncLoadScript("file2.js",function(){
22         asyncLoadScript("file3.js",function(){
23             //所有js加载完成
24         });        
25     });    
26 });

还有一种方法就是利用XMLHttpRequest对象异步加载js文件，此方法的优点是：在js文件加载完后才创建script元素，所以它下载后不会自动执行。缺点是js文件必须与页面放在同一个域内，不能从CDN(内容分发网络)下载，一般来说大型网站不会使用这种方法。代码如下：

 1 //跨浏览器创建XHR对象
 2 function createXHR(){
 3     if(typeof XMLHttpRequest != "undefined"){
 4         createXHR = function(){
 5             return new XMLHttpRequest();
 6         };
 7     }else if(typeof ActiveXObject != "undefined"){
 8         createXHR = function(){
 9             if(typeof arguments.callee.activeXString != "string"){
10                 var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
11                 for(var i=0; i<versions.length; i++){
12                     try{
13                         var xhr = new ActiveXObject(versions[i]);//试探浏览器支持能力
14                         arguments.callee.activeXString = versions[i];//把浏览器支持的XHR版本保存在activeXString属性中
15                         return xhr;
16                     }
17                     catch(ex){
18                         //skip
19                     }
20                 }    
21             }
22             return new ActiveXObject(arguments.callee.activeXString);
23         };
24     }else{
25         createXHR = function(){
26             throw new Error("No XMLHttpRequest object available.");
27         };
28     }
29     return createXHR();
30 }
31 //利用XHR对象异步加载JS
32 function XHRLoadScript(url,callback){
33     var xhr = createXHR();
34     //为保持跨浏览器兼容性，必须在调用open()之前指定onreadystatechange事件处理程序
35     xhr.onreadystatechange = function(){
36         if(xhr.readyState == 4){
37             if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
38                 var script = document.createElement("script");
39                 script.type = "text/javascript";
40                 script.text = xhr.responseText;
41                 document.body.appendChild(script);
42                 
43                 callback();
44             }
45         }
46     };
47     xhr.open("get",url,true);
48     //尽管不发送数据，但对于某些浏览器来说这个参数是必需的
49     xhr.send(null);
50     
51 }

使用其它库来加载js：

1、Yahoo Search的lazyload 用法： LazyLoad.js([urlString|urlArray],function(){});
2、Kyle Simpson的LABjs 用法：$LAB.script(firstURL).script(secondURL).wait(function(){});