Javascriptの非同期読み込み（JavaScriptにおけるブラウザ読み込み方法）の詳しい解説

1. 同期ロードと非同期ロードの形式
1. 同期ロード
最も一般的に使用される同期ロードの形式は次のとおりです:

ブロッキングモードとも呼ばれる同期モードは、ブラウザによる後続の処理を妨げ、後続の解析を停止するため、後続のファイル (画像など) の読み込みも停止します。、レンダリング、コード実行。
js を同期的に実行する必要がある理由は、js では文書内容の出力、dom の変更、リダイレクトなどの動作が発生する可能性があるため、デフォルトでは同期実行が安全です。
以前の一般的な推奨事項は、このブロック動作を最小限に抑え、ページが最初に表示されるようにするために、ページの最後にを配置することでした。
簡単に言えば、ロードされたネットワークタイムラインはウォーターフォールモデルであり、非同期的にロードされたタイムラインは同時実行モデルです。
2. 共通の非同期読み込み (スクリプト 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 を使用してページ上の <script> タグ内に script 要素を作成し、それをドキュメントに挿入します。これにより、js コードのノンブロッキングダウンロードが実現します。 async 属性は HTML5 の新しい非同期サポートです。以下の説明を参照してください (追加しなくても影響しません)。 このメソッドはスクリプト DOM 要素メソッドと呼ばれ、js が同じオリジンを持つ必要はありません。 js コードを匿名関数でラップしてすぐに実行する方法は、変数名が外部に漏洩しないようにするためのもので、特に js ライブラリでよく使用される方法です。 たとえば、Google Analytics と Google Badge はどちらも次の非同期読み込みコードを使用します: <div class="codetitle"> <a style="CURSOR: pointer" data="81787" class="copybut" id="copybut81787" onclick="doCopy('code81787')">コードをコピーします</a> コードは次のとおりです。 : </div> <div class="codebody" id="code81787">(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.async = true;po.src = "https://apis.google.com/js/plusone.js "; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })(); ただし、このロード方法では、ロードが完了する前に onload イベントがトリガーされるのを防ぎますが、多くのページのコードは onload 中に追加のレンダリング作業を実行する必要があるため、依然として一部のページの初期化処理がブロックされます。 </div> 3. オンロード中の非同期ロード <div class="codetitle">コードをコピーします<a style="CURSOR: pointer" data="59761" class="copybut" id="copybut59761" onclick="doCopy('code59761')"> コードは次のとおりです: </a> (function() { </div>function async_load(){ <div class="codebody" id="code59761">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]; parentNode.insertBefore(s, x); if (window.attachEvent) else window.addEventListener('load' 、 async_load 、 false); })(); これは前のメソッドと似ていますが、重要なのは、js の非同期読み込みをすぐに開始するのではなく、onload 時にのみ非同期読み込みを開始することです。これにより、onload イベントのトリガーがブロックされるという問題が解決されます。 追加: DOMContentLoaded および OnLoad イベント DOMContentLoaded: ページ (ドキュメント) が解析され、ページ内の dom 要素が使用可能になりました。ただし、ページ内で参照されている画像とサブフレームはまだ読み込まれていない可能性があります。 OnLoad: ページのすべてのリソースがロードされました (画像を含む)。ブラウザの読み込みの進行はこの時点で停止します。 これら 2 つの時点は、ページ読み込みタイムラインを 3 つの段階に分割します。 4. 非同期読み込みのその他の方法 JavaScript の動的な性質により、次のような非同期読み込み方法が多数あります。 XHR Eval XHR Injection Iframe のスクリプト Script Defer document.write スクリプトタグ もう 1 つの方法は、setTimeout を他のメソッドと組み合わせて使用し、0 秒遅らせることです。 XHR Eval: ajax を通じて js のコンテンツを取得し、eval を通じて実行します。 var xhrObj = getXHRObject(); <div class="codetitle"> <a style="CURSOR: pointer" data="99282" class="copybut" id="copybut99282" onclick="doCopy('code99282')">コードをコピーします </a> コードは次のとおりです: </div> <div class="codebody" id="code99282"> xhrObj.onreadystatechange = function() { if (xhrObj.readyState != 4 ) return; xhrObj.open('GET) ', ' A.js', true); xhrObj.send(''); Iframe のスクリプト: js を非同期で実行できるように iframe 要素を作成して挿入します。 </div> <div class="codetitle"> コードをコピー <a style="CURSOR: pointer" data="80719" class="copybut" id="copybut80719" onclick="doCopy('code80719')"> コードは次のとおりです。 </a> </div>var iframe = document.createElement('iframe '); <div class="codebody" id="code80719">document.body.appendChild(iframe); var doc = iframe.contentWindow.write(' ;') ; doc.close(); GMail モバイル: ページ内の js の内容はコメント化されているため、必要に応じてテキストを取得します。 script 要素の内容を変更し、コメントを削除します。その後、eval が実行されます。 </div> <div class="codetitle">コードをコピー<a style="CURSOR: pointer" data="62965" class="copybut" id="copybut62965" onclick="doCopy('code62965')"> コードは次のとおりです:</a> <script type="text/javascript "> </div>/* <div class="codebody" id="code62965">var ... */ </script>

詳細については、参考資料の 2010 Velocity Conference で Steve Souders と Taobao が提供した 2 つの配布資料を参照してください。

2. 非同期属性と遅延属性

1. 遅延属性
>defer 属性は、このスクリプトに document.write または dom の変更がないことを宣言します。
ブラウザは、ページの後続の処理をブロックすることなく、file.js と defer 属性を持つ他のスクリプトを並行してダウンロードします。
defer 属性は 13 年以上前の IE 4.0 に実装されました。 Firefox は 3.5 から defer 属性をサポートします。
注: すべての遅延スクリプトは、順番に実行されることが保証されています。
2. async 属性

async 属性は HTML5 の新機能です。この関数は defer に似ていますが、ダウンロード後できるだけ早く実行されます。スクリプトが順番に実行されるという保証はありません。これらは onload イベントの前に完了します。
Firefox 3.6、Opera 10.5、IE 9、および最新の Chrome と Safari はすべて、async 属性をサポートしています。 async と defer を同時に使用できるため、IE 4 以降のすべての IE で非同期読み込みがサポートされます。
3. HTML 4.01 と HTML5 の
<script> タグの違いの詳細な説明: type 属性は HTML 4 では必須ですが、HTML5 ではオプションです。 async 属性は HTML5 の新しい属性です。 一部の属性 (xml:space) は HTML5 ではサポートされていません。 注: async 属性がないと、後続の処理を続行する直前にスクリプトが取得 (ダウンロード) され、実行されるため、ブラウザーの後続の処理がブロックされます。 async 属性がある場合、スクリプトは非同期でダウンロードおよび実行され、ブラウザは後続の処理を続行します。 HTML4 には defer 属性があり、このスクリプトがドキュメント要素 (document.write なし) を生成しないことをブラウザーに通知するため、ブラウザーは後続の処理とレンダリングを続行します。 async 属性がなく、defer 属性がある場合、ページが解析された後にスクリプトが実行されます。 両方が同時に設定されている場合、defer 属性は主に、async 属性をサポートしていない古いブラウザが同期メソッドではなく元の defer メソッドで処理できるようにするためのものです。 公式の説明も参照してください: script async 個人的な補足: HTML5 はすでに非同期ロードをサポートしているのに、なぜ以前に推奨された面倒な方法 (スクリプト要素を動的に作成する) を使用する必要があるのでしょうか? 答え: 古いブラウザは互換性のために非同期をサポートしていません。将来的にすべてのブラウザーがこれをサポートする場合、スクリプトに async 属性を直接追加するのが最も簡単な方法です。 3. 遅延ロード 以前に非同期ロード (非同期ロード) の問題を解決しました。遅延ロードとは何かについて説明します。 遅延読み込み: 一部の JS コードは、ページの初期化時にすぐには必要ありませんが、後で特定の状況で必要になります。遅延読み込みとは、これらの一時的に使用されていない js が最初には読み込まれず、必要なときまたは後で js コントロールを通じて非同期的に読み込まれることを意味します。 つまり、js は多くのモジュールに分割されており、ページの初期化時にすぐに実行する必要がある js のみがロードされ、他の js のロードは最初に必要になるまで遅延されます。 特にページが多数の異なるモジュールで構成されており、その多くが一時的に使用されないか、まったく使用されない場合があります。 画像の遅延読み込みと同様に、画像が表示領域に表示されるとき (スクロールバーが引き下げられるとき)、画像が読み込まれて表示されます。 4. スクリプトの 2 段階の読み込みと遅延実行 JS の読み込みは、実際にはバイトのダウンロードと実行 (解析と実行) の 2 段階で構成されます。 ブラウザは、同期的にロードされたか非同期的にロードされたかに関係なく、ダウンロード直後に js コンテンツを解析して実行します。 前述の非同期読み込みはダウンロード段階での問題のみを解決しますが、コードはダウンロード直後に実行されます。 ブラウザは、JS の解析および実行フェーズ中にすべての操作をブロックし、現時点ではブラウザは応答しない状態になります。 インターネット経由でスクリプトをダウンロードするにはかなりの時間がかかることは誰もが知っていますが、解析と実行にも時間がかかる第 2 段階は見落とされがちです。スクリプトの解析と実行には、特に大規模なスクリプトが多数ある場合、思っているよりも時間がかかります。すぐに実行する必要があるものもあれば、そうでないものもあります (たとえば、特定のインターフェイスを表示するときや操作を実行するときにのみ必要となるものなど)。 これらのスクリプトは遅延実行し、最初に非同期でダウンロードしてキャッシュすることができますが、すぐには実行されず、初めて必要になったときに 1 回実行されます。 ダウンロードと実行を分離するために特別なテクニックを使用できます (これも JavaScript の動的な性質のおかげです)。たとえば、JS コンテンツは画像またはオブジェクトオブジェクトとしてロードおよびキャッシュされるため、すぐには実行されず、初めて必要になったときに実行されます。 このセクションの詳細については、最後の「リソース」にある ControlJS への関連リンクを参照してください。 ヒント: 1. 長いダウンロード時間をシミュレートします: バックエンドスクリプトを作成し、一定期間スリープさせます。たとえば、jsp の Thread.sleep(5000); とすると、5 秒後にコンテンツを受信できるようになります。 2. 模拟较长的 js 代码执行时间（因为这步一般比较快不容易观察到）： var t_start = Number(new Date()); while ( t_start + 5000 > Number(new Date()) ) {} 这个代码将使 js 执行5秒才能完成！ 五、script 标签使用的历史 1. script 放在 HEAD 中 <div class="codetitle"><a style="CURSOR: pointer" data="89669" class="copybut" id="copybut89669" onclick="doCopy('code89669')">复制代码代码如下:</script>

Javascriptの非同期読み込み（JavaScriptにおけるブラウザ読み込み方法）の詳しい解説_JavaScriptスキル