動態加載JS文件提升訪問網站速度

　　相對與HTML,CSS，javascript是最影響瀏覽器性能的，因為瀏覽器在遇到<script>標簽時，必須等待js代碼下載和執行完畢后再執行后面的內容，因此當頁面中js文件過多時，網站訪問速度明顯下降。然而，現在的web應用用到js只會越來越多，那么我們如何有效組織js代碼來提高網站的性能呢？通過相關資料，我總結了以下需要注意的幾點。

　　1、將script標簽置於網頁底部，一般置於<body/>標簽之前。這樣用戶不必等待js加載並執行完成后就可以完整的瀏覽整個網頁。

　　2、將多個js文件合並到一個url中加載，以減少http請求。對於此點，可閱讀 http://dancewithnet.com/2010/06/08/minify-js-and-css-files-in-server/

　　3、通過js動態創建<script>標簽動態加載js文件，以達到無阻賽的加載腳本，可以寫一個函數來做這個工作

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{
          script.onload=function(){
               callback();
          }
     }      
     script.src=url;
     document.getElementByTagName("head")[0].appendChild(script);
}                

以上這種方式是一種跨瀏覽器的非常易用的方法，也可以通過XMLHttpRequest腳本注入的方式，但此方式有跨域的限制，所以推薦上面的方式。

互聯網上有很多這樣的js庫，供我們下載使用：

    Lazyload類庫，下載地址：http://github.com/rgrove/lazyload/

    使用方法

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

同時加載多個文件

<script type="text/javascript" src="lazyload-min.js"></script>
<script type="text/javascript">
     LazyLoad.js(["test1.js","test2.js","test3.js"],function(){
        Application.init();
    })
</script>

    LABjs類庫下載地址：http://labjs.com

    使用方法

<script type="text/javascript" src="lab.js"></script>
<script type="text/javascript">
    $LAB.script("test.js").wait(function(){
         Application.init();
    });
</script>
//加載多個
<script type="text/javascript">
    $LAB.script("test1.js").script("test2.js").wait(function(){
         Application.init();
    });
</script>

LAB的好處是可以靈活的處理是否加載。

<script type="text/javascript" src="lab.js"></script>
<script type="text/javascript">
    $LAB.script("test1.js").script("test2.js").wait().script("test3.js").wait(function(){
    Application.init();
});
</script>

這樣就可以讓test1.js和test2.js加載執行完成后再加載執行test3.js。