私の理解では HTML5 ブラウザーでのみ機能する タグの属性asyncとdeferについていくつか質問があります。<script>
私のサイトの1つには、現在タグのすぐ上に2つの外部JavaScriptファイルがあります</body>。1つ目はjQueryの1 つ目は Google から取得され、2 つ目はローカルの外部スクリプトです。
サイトの読み込み速度
asyncページの下部にある 2 つのスクリプトを追加すると、何か利点がありますか?async2 つのスクリプトにオプションを追加して、ページの先頭に配置すると、何か利点がありますか<head>?これは、ページが読み込まれるときにダウンロードされることを意味しますか?
これにより HTML4 ブラウザでは遅延が発生すると思われますが、HTML5 ブラウザではページの読み込みが高速化されるでしょうか?
使用<script defer src=...
<head>属性を使用して内部の 2 つのスクリプトをロードすると、defer以前のスクリプトと同じ効果が得られますか</body>?- もう一度言いますが、これによって HTML4 ブラウザの速度が遅くなると思われます。
使用<script async src=...
async2つのスクリプトが有効になっている場合
- 同時にダウンロードされますか?
- それとも、ページの残りの部分と 1 つずつですか?
- その場合、スクリプトの順序が問題になりますか? たとえば、1 つのスクリプトが他のスクリプトに依存しているため、1 つのスクリプトのダウンロードが速い場合、2 番目のスクリプトは正しく実行されない可能性があります。
最後に、HTML5 がより一般的に使用されるようになるまで、現状のままにしておくのが最善でしょうか?
ベストアンサー1
この画像は通常のスクリプトタグを説明しておりasync、defer
非同期スクリプトはスクリプトが読み込まれるとすぐに実行されるため、実行順序は保証されません (最後に含めたスクリプトが最初のスクリプト ファイルの前に実行される場合があります)
遅延スクリプトは、ページ内に表示される実行順序を保証します。
このリンクを参照してください:async 属性と defer 属性 - Web とともに成長する