ホームページ > 記事 > ウェブフロントエンド > Javascript読み込みの解析

Javascript読み込みの解析

不言オリジナル: 2018-07-11 10:36:511200ブラウズ

この記事では、主に Javascript の読み込みの分析を紹介します。これは、必要な友達に参考にしてもらいます

(1) 同期読み込み

。 Web ページでは、ブラウザが js ファイルをロードする方法は 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを使用します。以下に示すように、

//内嵌脚本
<script type="text/javacript">    
// code here!
</script>
//加载外部脚本
<script type="text/javascript src="path/demo.js"></script>

3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを追加すると、ブラウザはそれを読み取って実行できます。ただし、ブラウザは、<script> タグを次の順序で読み取ります。その結果、複数のファイルが相互に依存している場合は、依存関係が最も小さいファイルが先頭に配置され、依存関係が最も大きいファイルが最後に配置される必要があります。そうでない場合、コードはエラーを報告します。私はブートストラップを使用する際にこのことをよく知っていると思います。一方、ブラウザは同期モードで 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを読み込みます。つまり、ページは後続のコードを実行する前に JavaScript ファイルが読み込まれるのを待ちます。 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグが多数ある場合、ブラウザはそれらを同時に読み取ることができず、1 つを読み取ってからもう 1 つを読み取らなければならないため、読み取り時間が大幅に長くなり、ページの応答が遅くなり、ユーザーエクスペリエンスが低下します。影響を受ける。同期モードはブロッキングモードとも呼ばれ、ブラウザによる後続の処理を禁止し、現在の読み込みが完了した場合にのみ次のステップを実行できるため、デフォルトでは同期実行が安全です。ただし、js内でドキュメント内容の出力やDOMの変更、リダイレクトなどの動作があるとブロッキングの原因となります。したがって、一般的には、ページのブロックを軽減できる <body> の最後に <script> タグを配置することをお勧めします。 </script>

(2) 非同期読み込み

この問題を解決するために、ES5 では DOM メソッドを使用して JavaScript スクリプトファイルを動的に読み込みます

。

function loadScript(url) {    
var script = document.createElement("script");
    script.type="text/javascript";
    script.src=url;
    document.body.appendChild(script);
}

このメソッドは、新しい 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを作成し、その src 属性を設定することで、javacript ファイルを非同期的に読み取ります

これにより、ページのブロックは発生しませんが、他のスクリプトファイルがそれに依存している場合は別の問題が発生します。現時点では、このスクリプトがいつロードされるかは保証されません。別の読み込み方法は、

defer 属性と async

属性を使用してスクリプトを非同期的に読み込むことです。レンダリングエンジンは、このコマンド行を検出すると、外部スクリプトのダウンロードを開始しますが、ダウンロードされて実行されるのを待たずに、次のコマンドを直接実行します。 defer と async の違いは次のとおりです。 defer は、ページ全体がメモリ内で正常にレンダリングされるまで (DOM 構造が完全に生成され、他のスクリプトが実行されるまで) 実行されません。 async は、ダウンロードが完了すると、レンダリングエンジンがレンダリングを中断します。このスクリプトを実行します。後でレンダリングを続けます。つまり、defer はレンダリング後に実行され、async はダウンロード後に実行されます。さらに、複数の遅延スクリプトがある場合、それらはページに表示される順序で読み込まれますが、複数の非同期スクリプトは読み込み順序を保証できません。 IE9 以降のバージョンには、遅延の実装に非常に悪いエラーがいくつかあり、実行順序が保証されません。 IE9 以下をサポートする必要がある場合は、defer を使用しないことをお勧めします。また、実行順序が重要な場合は、属性なしでスクリプトを含めることをお勧めします。

9a9097c5776e07f54236d5cd1dc435ae2cacc6d41bbb37262a98f745aa00fbf0
27893951ee31aa4ab68c289425ee4a992cacc6d41bbb37262a98f745aa00fbf0

遅延と非同期の選択方法。使用するスクリプトがモジュールであり、他のスクリプトファイルに依存しない場合は、async を使用します。スクリプトが他のスクリプトに依存する場合、または他のスクリプトに依存する場合は、スクリプトファイルが小さく、非同期スクリプトに依存する場合は defer を使用します。、内部埋め込みスクリプトを使用すると、このファイルがすべての非同期スクリプトの前に配置されます。

もう 1 つの方法は、onload イベントの非同期読み込みです。

(function(){
    if(window.attachEvent) {
        window.attachEvent("load", asyncLoad);
    } else if(window.addEventListener) {
        window.addEventListener("load", asyncLoad);
    } else {        window.onload = asyncLoad;    }  
    var asyncLoad = function() {
        var script = document.createElement("script");
        script.type="text/javascript";
        script.async = true;
        script.src = (&#39;https:&#39;==document.location.protocol ? &#39;https://ssl&#39; :  &#39;http:www&#39;) + &#39;.baidu.com/demo.js&#39;;
        var s = document.getElementsByTagName(&#39;script&#39;)[0];
        s.parentNode.insertBefore(script, s);
    };
)();

この方法は、スクリプトを挿入するメソッドを関数に記述し、それをウィンドウの onload メソッド内で実行することで、onload イベントのトリガーをブロックする問題を解決します。

Javascript の動的な性質により、多くの非同期読み込みメソッドがあります: XHR インジェクション、XHR eval、Iframe のスクリプト、document.write("