非同期と遅延: Web サイトを最も最適化する HTML5 スクリプト読み込み属性はどれですか?

非同期と遅延: HTML5 でのスクリプト読み込みの最適化

非同期と遅延について理解する

async 属性と defer 属性は次のことを提供しますHTML5 での外部スクリプトのロードと実行順序を制御するメカニズム

非同期属性

• 非同期を持つスクリプトは、ロードされるとすぐに実行されます。
• 実行順序は保証されません。たとえば、後で追加したスクリプトは、先に追加したスクリプトよりも前に実行できます。
• 他のスクリプトの実行に依存しない非ブロック スクリプトに役立ちます。

遅延属性

• 遅延を伴うスクリプトも非同期でロードされますが、実行されるのは初期 HTML 解析が完了しました。
• 実行順序がページ内の表示順序と一致するようにします。
• ページのレンダリングに重要ではないスクリプトに適しています。

サイトの負荷への影響速度

ページの下部:

• ページの下部にあるスクリプトに非同期を追加すると、スクリプトの読み込みが可能になり、読み込み速度がわずかに向上する可能性があります。

トップページ:

• スクリプトを非同期で移動するか、 に遅延します。メインスレッドを他のタスクに解放することで、レンダリングを高速化できます。
• ただし、HTML4 ブラウザでは遅延が発生する可能性があります。

ページの下部への配置を遅延

• 内で defer を使用しています。
• defer は実行順序を保証しますが、ドキュメントの最後に配置されたスクリプトは保証しません。

使用複数のスクリプトと非同期

• 非同期のスクリプトをダウンロードできます
• ただし、実行順序は保証されていないため、スクリプトが相互に依存している場合は潜在的な問題が発生します。
• スクリプトに依存関係がないことを確認したり、潜在的な競合状態を処理したりしないでください。

遅延、非同期、ステータスQuo

• Defer は実行順序を保持するため、ほとんどの場合に適しています。
• Async は読み込みをわずかに高速化しますが、順序なしで実行される可能性があります。
• HTML5 が広く採用されるまでは、HTML4 ブラウザでの互換性の問題を回避するために実装を遅らせることを検討してください。

以上が非同期と遅延: Web サイトを最も最適化する HTML5 スクリプト読み込み属性はどれですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。