非同期、defer および動的スクリプトのタイプを探求すること。
Nowadays scripts can be heavy than HTML and their download size is larger.Nowadays scripts are heavy than the HTML, また、処理時間も長くなります。
しかし、次のような重要な問題がある可能性があります。
- スクリプトはその下の DOM 要素を見ることができない
- ページの上部に大きなスクリプトがある場合、それは「ページをブロック」します。
この問題は、スクリプトを最後 (html 後)に配置すれば解決できますが、その解決策は html ロード後にスクリプトをロードするように強制することになります。 長い HTML ドキュメントでは、インターネットの速度が遅い場合、顕著な遅延となるかもしれません。
幸運にも、この問題を解決してくれる 2 つの <script> 属性があります。 defer と async です。
defa 属性により、ブラウザはスクリプトを「バックグラウンド」モードでロードし、ロード時にそれを実行します。
DOMContentLoaded イベントは、スタイルシート、画像、およびサブフレームの読み込みが終了するのを待たずに、最初の HTML ドキュメントが完全に読み込まれてパースされたときに開始されます。
しかし、
<script>タグにsrcがない場合、defer属性は無視されます。Async
async 属性とは、「独立」モードでのスクリプト読み込みに役立つことを意味します。 DOMContentLoaded と非同期スクリプトは互いに待ちません (「ロードファースト」の順序)。
他のスクリプトは
asyncスクリプトを待たず、asyncスクリプトもそれらを待たずにロードします。 非同期モード (遅延モードのような) はページをブロックしません。Async スクリプトは、カウンタ、広告、分析ツールなど、独立したサード パーティ製スクリプトをページに統合する場合に最適です。
Dynamic
JavaScript を使用して動的にスクリプトを追加することもできます。
![]()
はドキュメントに追加すると同時にロードが始まり、デフォルトで「非同期」スクリプトとして動きます。
それは次のことを意味します:
- 何も待たず、何も待たない。
- 最初にロードしたスクリプトは、最初に実行する (「ロードファースト」順)。
しかし、動的スクリプトを html に追加する前に script.async = false を設定することにより、動的スクリプトの非同期モードをオフにすることができます。
Summary
async と defer はどちらも共通して、そのスクリプトのダウンロードがページのレンダリングをブロックしないこと、です。 そのため、ユーザーはページのコンテンツを読み、すぐにそのページを理解することができます。
読んでいただきありがとうございます。 お気に召していただけたなら幸いです。