JavaScriptの同期読み込みと非同期読み込みの例を詳しく解説

同期読み込み

私たちが通常使用する同期読み込みの最も一般的な形式:

<script src="http://yourdomain.com/script.js"></script>

同期モードはブロッキング モードとも呼ばれ、ブラウザーによる後続の処理を防ぎ、後続の解析を停止するため、後続のファイルの読み込みも停止します(画像など) )、レンダリング、コード実行。 js を同期実行する必要がある理由は、js 内で文書内容の出力、dom の変更、リダイレクトなどの動作が発生する可能性があるため、デフォルトでは同期実行が安全です。これまでの一般的な推奨事項は、このブロック動作を最小限に抑え、ページが最初に表示されるようにするために、ページの最後に 36cc49f0c466276486e50c850b7e4956 を配置することでした。簡単に言うと、ロードされたネットワーク タイムラインはウォーターフォール モデルですが、非同期的にロードされたタイムラインは同時実行モデルです。

一般的な非同期読み込み

(function() { 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://yourdomain.com/script.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
})();

非同期読み込みは、ノンブロッキングとも呼ばれ、ブラウザは js のダウンロードと実行中に後続のページの処理を続けます。この方法では、js を使用してページ上の 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグ内に script 要素を作成し、それをドキュメントに挿入します。これにより、js コードのノンブロッキングダウンロードが実現します。 async 属性は HTML5 の新しい非同期サポートです。追加するとよいでしょう (追加しなくても影響しません)。このメソッドは Script DOM Element メソッドと呼ばれ、同じオリジンの js を必要としません。 js コードを匿名関数でラップしてすぐに実行する方法は、変数名が外部に漏洩しないようにするためのもので、特に js ライブラリでよく使用されます。
たとえば、Google Analytics と Google+ Badge は両方とも次の種類の非同期読み込みコードを使用します:

(function() { 
var ga = document.createElement('script'); 
ga.type = 'text/javascript'; ga.async = true; 
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})(); 
(function() 
{var po = document.createElement("script"); 
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; 
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(po, s); 
})();

ただし、この読み込み方法では、読み込みが完了する前に onload イベントがトリガーされないようにするため、多くのページのコードは依然としてonload 中に追加のレンダリング作業などが実行されるため、一部のページの初期化処理がブロックされます。

onload時の非同期読み込み

(function() { 
function async_load(){ 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://yourdomain.com/script.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
} 
if (window.attachEvent) 
window.attachEvent('onload', async_load); 
else 
window.addEventListener('load', async_load, false); 
})();

これは前の方法と似ていますが、重要なのはjsの非同期読み込みをすぐに開始するのではなく、onload時にのみ非同期読み込みを開始するということです。これにより、onload イベントのトリガーがブロックされるという問題が解決されます。
追加: DOMContentLoaded および OnLoad イベント
DOMContentLoaded: ページ (ドキュメント) が解析され、ページ内の dom 要素が使用可能になりました。ただし、ページ内で参照されている画像とサブフレームはまだ読み込まれていない可能性があります。
OnLoad: ページ上のすべてのリソースがロードされました (画像を含む)。ブラウザの読み込みの進行はこの時点で停止します。
これら 2 つの時点により、ページ読み込みタイムラインが 3 つの段階に分割されます。

以上がJavaScriptの同期読み込みと非同期読み込みの例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。