Web パフォーマンスを最適化するには、JavaScript を CSS よりも前に置く必要がありますか?

CSS は常に JavaScript よりも前に置く必要がありますか?

Web 開発の領域では、HTML ドキュメント内での CSS および JavaScript リソースの配置について、継続的な議論が行われています。従来、レンダリング スレッドでは続行する前に必要なすべてのスタイル情報が必要であると考えられていたため、JavaScript の前に CSS を含めることが推奨されてきました。しかし、ブラウザ テクノロジーの最近の進歩により、この概念は疑問視されています。

前提条件のテスト

最適なパフォーマンスを得るには CSS が JavaScript よりも前に存在する必要があるという前提を検証するために、詳細なテストが実施されました。 。テストには以下が含まれます:

• JavaScript の前に CSS が含まれているページ (CSS ファースト)
• CSS の前に JavaScript が含まれているページ (JavaScript ファースト)

両方のページ現実的な状況をシミュレートするために、JavaScript および CSS リソースの遅延読み込みが含まれていました。テストは異なるブラウザで複数回繰り返されました。

デスクトップ ブラウザでの結果

• CSS First: CSS の遅延は無視できる程度でしたページの読み込み時間への影響。
• JavaScript First: CSS が遅延すると、ページの読み込みが大幅に速くなり、パフォーマンスが向上したことがわかります。

の結論デスクトップ ブラウザ

従来の推奨事項に反して、外部スクリプトの後に外部スタイル シートを配置すると、パフォーマンスが向上する可能性があります。これは、最新のブラウザが投機的解析を実装しており、リソースが HTML 内に表示される順序に関係なく、並行してダウンロードされるためです。

モバイル ブラウザ

テストは次のとおりです。 Android デバイスでも実施されました:

• JavaScript First: JavaScript の実行が完了するまで CSS の読み込みが遅れることが観察されており、一部のモバイルでは投機的解析のサポートが制限されている可能性があることが示唆されています。

ブラウザのサポート

投機的解析は、Chrome、Internet Explorer 8、Firefox 3.5、Safari 4 など、ほとんどの最新ブラウザでサポートされています。これは、ほとんどのデスクトップ ユーザーにとって、JavaScript を CSS より前に配置するとパフォーマンスが向上することを意味します。

モバイルの制約を考慮する

モバイル デバイスでは、CSS より前に JavaScript を配置することによるパフォーマンスへの影響ブラウザとデバイスの機能によって異なる場合があります。投機的な解析は完全にはサポートされていない可能性があるため、開発者は最初に CSS をロードしてモバイル ユーザー向けに最適化することを検討する必要があります。

追加メモ

• の終わりとは対照的に、 内のスクリプトの配置が想定されます。
• 結果は外部スタイル シートとスクリプトに適用されます。インライン CSS と JavaScript は、異なるパフォーマンスの考慮事項に従う場合があります。
• 非同期読み込み、外部サービス呼び出し、ブラウザーのキャッシュなどの他の要因は、ページ全体のパフォーマンスに影響を与える可能性があります。

以上がWeb パフォーマンスを最適化するには、JavaScript を CSS よりも前に置く必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。