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

同期読み込み

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

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

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

一般的な非同期読み込み

(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 を使用してページ上の