『高性能JavaScript』読書ノート(一)

3237 ワード

一.ロードと実行――JavaScriptルールを最適化する:
1.脚本を下に置く;2.ページ中外チェーンスクリプトファイルの数を減らす:
例えば、1つの100 kbのファイルをダウンロードするのは、4つの25 kbのファイルをダウンロードするより早いです.これはオフラインでツールを包装したり、Yahooのようにできます.compbo handlerのリアルタイムオンラインサービスを実現します.3.HTML 4は＜script＞タブで拡張属性を定義しています.defer:
　本要素を指定するスクリプトはDOMを変更しないので、コードは安全な遅延で実行できます.

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

defer属性を持つタグはドキュメントのどの位置に置いてもいいです.対応するjsファイルはページがタグに解析された時からダウンロードしますが、DOMロードが完了するまでは実行されません.defer属性を持つJavaScriptファイルをダウンロードすると、ブラウザの他のプロセスがブロックされませんので、これらのファイルはページ内の他のリソースと並行してダウンロードできます.
世界は毎日変化しています.先端も例外ではありません.deferについては、asyncもありますので、最新の状況をご覧ください.https://html.spec.whatwg.org/mul …l〓〓〓tr-script-defer.簡単に次のようにまとめます.①defer、asyncは外部チェーンファイルにしか使えません.②deferが設定されておらず、asyncが設定されていない場合は、スクリプトファイルはページに表示される位置に従ってロードされ、ページ解析がブロックされます.③deferが設定されている場合は、スクリプトファイルは、ページに表示される位置によってロードされ、ページ解析がブロックされないように、onloadイベントを解析したページがトリガされる前に実行されます.④asyncを設定した場合、スクリプトファイルはページに表示される位置に従ってロードします.ロードプロセスはページ解析をブロックしないので、実行過程はページ解析をブロックします.⑤asyncを設置しても、deferを設置しています.各ブラウザの効果が違いますので、自分で確認してください.
4.ダイナミックスクリプト要素:

var script = document.getElement("script");
script.type = "text/javascript";
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);

さらなるパッケージ:

function loadScript(url, callback){
    var script = document.createElement("script");
    script.type = "text/javascript";
    if(script.readyState){//使用特征检测（Feature detection）IE
        script.onreadystatechange = function(){
            if(script.readyState == "loaded" || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    }else{//其他浏览器
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

5.XMLHttpRequestスクリプト注入:

var xhr = new XMLHttpRequest();
xhr.open('get', 'file1.js', true);
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.text = xhr.responseText;
            document.body.appendChild(script);
        }
    }
};

JavaScriptのプリコンパイル解説