jsファイルの非同期読み込み方法まとめ（コード付き）

この記事は、js ファイルの非同期読み込み方法をまとめたものです (コード付き)。必要な方は参考にしていただければ幸いです。

非同期読み込みの理由: 同期読み込みはブラウザの後続の処理をブロックします。つまり、現在のファイルが読み込まれた後にのみ、次のファイル (画像など) の読み込み、レンダリング、およびコードの実行を実行できます。 js内でドキュメント内容の出力、DOMの変更、リダイレクト等の動作があるとページブロックの原因となります。

非同期読み込みとは: 非同期読み込みはブラウザの後続の操作をブロックしません。つまり、js の読み込みと実行中に、他のファイルが並行して読み込まれてページが表示されます。

方法 1: async 属性
async 属性は、js ファイルが利用可能になり次第実行され、スクリプトがページの残りの部分に対して非同期に実行されることを指定します (スクリプトは、ページは引き続き解析されます)

async 属性は外部スクリプトにのみ適用されます (src 属性を使用する場合のみ)。

async 属性は実行順序を保証しません。

<script type="text/javascript" src="demo_async.js" async="async"></script>

方法 2: defer 属性
defer 属性は、ページが読み込まれるまでスクリプトの実行を遅らせるかどうかを指定します。

defer 属性は、スクリプトがドキュメントの内容を変更せず、ブラウザはスクリプトを実行せずにドキュメントの残りの部分を安全に読み取ることができることを認識し、ドキュメントが変更されるまでスクリプトの解釈を延期することを意味します。ユーザーに表示されました。文書処理を高速化します。

Internet Explorer のみが defer 属性をサポートします。

<script type="text/javascript" defer="defer"></script>

方法 3: DOM を動的に作成する
同じ JS ソースは必要ありません

これらのコードはタグの前 (HTML ファイルの下部近く) に配置する必要があります

この読み込みメソッドにより、読み込みが完了する前に onload イベントがトリガーされるのを防ぎ、コードが多くのページがまだロード中です。追加のレンダリング作業を実行する必要があるため、一部のページの初期化処理は引き続きブロックされます。

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }     
</script>

方法 4: onload 中に DOM を動的に作成します
js が同じオリジンを持つ必要はありません

これらのコードはタグの前 (HTML ファイルの下部近く) に配置する必要があります

この読み込みメソッドは開始されませんjs をすぐに非同期で読み込みますが、非同期読み込みは onload でのみ開始されます。これにより、onload イベントのトリガーがブロックされるという問題が解決されます。

<script type="text/javascript">    
function downloadJSAtOnload() {        
var element = document.createElement("script");
        element.src = "defer.js";        
        document.body.appendChild(element);
    }    
    if (window.addEventListener)        
    window.addEventListener("load", downloadJSAtOnload, false);    
    else if (window.attachEvent)        
    window.attachEvent("onload", downloadJSAtOnload);    
    else window.onload = downloadJSAtOnload;
</script>

関連するおすすめ:

以上がjsファイルの非同期読み込み方法まとめ（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。