JavaScriptロード最適化

3055 ワード
JavaScript chrome IE firefox yu
1:HTML 4は<スクリプト>をヘッド部分に置いて、ページをロードする時、まず下から下までページ要素を処理することを提案します.「script」に出会ったら、src属性なら、まずjsファイルをダウンロードして、ダウンロードしてから、このファイルのjsを実行します.このプロセスは、ページの後ろの要素の処理をブロックし、ページが空白となって表示されます.初期のブラウザでは、シングルスレッドのダウンロードのみがサポートされています.現在、Internet Explorer 8、Firefox 3.5、Safari 4、and Chrome 2はマルチスレッドをサポートしています.jsファイルを並行してダウンロードします.だからをの底に置くことを提案します.次のような方法です
<html>
<head>
   <title>Script Example</title>
   <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>Hello world!</p>
   <script type="text/javascript" src="file1.js"></script>
   <script type="text/javascript" src="file2.js"></script>
   <script type="text/javascript" src="file3.js"></script>
</body>
</html>
2:jsファイルを統合し、ファイルのダウンロード数を減らす.http 1.1の耐久性接続であっても、http要求ごとにRTT遅延がありますので、100 kファイルは4つの25 kファイルよりダウンロード速度が速いです.
3:Internet Explorer 4+and Firefox 3.5+ファイルのダウンロードが完了したらすぐにjsは実行されません.ページ全体のdocumentが作成されるまで、実行を開始します.
<html>
<head>
    <title>Script Defer Example</title>
</head>
<body>
    <script defer>
        alert("defer");
    </script>
    <script>
        alert("script");
    </script>
    <script>
        window.onload = function(){
            alert("load");
        };
    </script>
</body>
</html>
4:動的に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 {  //Others
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
使い方:
loadScript("file1.js", function(){
    loadScript("file2.js", function(){
        loadScript("file3.js", function(){
            alert("All files are loaded!");
        });
    });
});
4:流行の非ブロッキング・ローディングモード:
   YUI 3:http://developer.yahoo.com/yui/3/
   Lazy Load:http://github.com/rgrove/lazyload/
   LABjs:http://labjs.com/
javascript中returnreturn false,return true総括.