JavaScript が非同期読み込みの実装メソッドを解決する方法の概要

デフォルトでは、JavaScript は同期的にロードされます。つまり、JavaScript が次の場所に配置されている場合、後続の要素は JavaScript がロードされるまで待ってから再度ロードする必要があります。ページの先頭で読み込みが非常に遅くなると、ユーザー エクスペリエンスに重大な影響を及ぼします。

(1) defer、IE のみをサポート
defer 属性の定義と使用法
defer 属性は、ページが読み込まれるまでスクリプトの実行を遅らせるかどうかを指定します。
一部の JavaScript スクリプトは document.write メソッドを使用して現在のドキュメント コンテンツを作成しますが、他のスクリプトは使用しない場合があります。

スクリプトがドキュメントのコンテンツを変更しない場合は、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグに defer 属性を追加してドキュメントの処理を高速化できます。ブラウザは、スクリプトを実行しなくてもドキュメントの残りの部分を安全に読み取ることができることを知っているため、ドキュメントがユーザーに表示されるまでスクリプトの解釈を延期します。
例:

<script type="text/javascript" defer="defer"> 
alert(document.getElementById("p1").firstChild.nodeValue); 
</script>

(2) async:
async の定義と使い方 (HTML5 の属性です)
async 属性は、スクリプトが利用可能になったら非同期で実行されることを指定します。
例:

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

注: async 属性は外部スクリプトにのみ適用されます (src 属性を使用する場合のみ)。
注: 外部スクリプトを実行するには複数の方法があります:
•async="async" の場合: スクリプトはページの残りの部分に対して非同期で実行されます (ページの解析が継続されている間にスクリプトが実行されます)
•次の場合async は使用されません defer="defer": ページの解析が完了するとスクリプトが実行されます
•async も defer も使用されない場合: ブラウザがページの解析を続行する直前にスクリプトが読み取られて実行されます

(3 ) スクリプトを作成し、DOM に移動し、ロード後に callBack を挿入します。コードを参照してください:

function loadScript(url, callback){ 
var script = document.createElement_x("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: Firefox, Safari, Chrome, and Opera 
script.onload = function(){ 
callback(); 
}; 
} 
script.src = url; 
document.body.appendChild(script); 
}

以上がJavaScript が非同期読み込みの実装メソッドを解決する方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。