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 をロードしてモバイルユーザー向けに最適化することを検討する必要があります。

追加メモ