javascript 性能分析:加載和運行

管理瀏覽器的javascript代碼是個麻煩的問題(從性能上講),因爲代碼執行阻塞了其他瀏覽器處理過程,像用戶界面繪製。每次遇到<script>標籤,頁面必須停下來等待代碼下載(如果是外部的)並執行,然後在繼續處理頁面其他部分。

下面有幾種方法可以減少javascript對性能的影響:

     1.將所有的<script>標籤放置在頁面的底部,在body關閉標籤</body>的上方。這樣可以保證頁面在腳步運行之前完成解析。

    2.將腳本成組打包。頁面的<script>標籤越少,頁面的加載速度越快,響應也更加迅速。不論是外部腳本還是內聯代碼都是如此。

    3.使用非阻塞方式下載javascript

        爲<script>標籤添加defer屬性--啓動下載 代碼不會被立刻執行 在onload事件句柄處理之前調用(只適用IE和Firefox3.5以上版本) 但是不支持跨領域的多種瀏覽器

        動態創建<script>元素 用戶它下載並執行代碼,但是如果腳本包含供頁面調用其他腳本調用的接口 會帶來問題,同樣代碼不能保證按照你指定的順序執行(firefox和Opera 可以)用loadScript或第三方js可以控制

        用 XHR對象下載代碼 並注入到頁面中

  4.第三方js插件 Yahoo的YUI 3 yui-min.js   指出dom的名字 傳遞給YUI的use()函數,再提供一個回調函數。

          YUI().use("dom",function(Y){

             Y.DOM.addClass(docment.body,"loaded");

              });

      Yahoo的Search的 Ryan Grove 創建LazyLoad庫 可以下載多個文件並保證按照正確順序執行

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

     LABjs http://labjs.com/ 中 Kyle Simpson寫的一個開源庫

      <script type="text/javascript" src="lab.js"></script>
      <script type="text/javascript">
         $LAB.script("first-file.js").wait()
           .script("the-rest.js")
           .wait(function(){
              Application.init();
             });
        </script>

   



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章