HTML では CSS を常に JavaScript の前に置く必要がありますか?

CSS は常に JavaScript よりも優先されるべきですか?

従来の知識:

一般的な推奨事項は、次の理由により、JavaScript よりも先に CSS を配置することで長い間推奨されてきました:

• レンダリングページのすべてのスタイル情報をレンダリングします。
• JavaScript が以前に含まれている場合、JavaScript エンジンは次のリソースのセットに進む前にすべてを解析する必要があります。
• これは、必要なスタイルがすべて揃っていないため、レンダリング スレッドがページを完全に表示できないことを意味します。

実際のテスト:

ただし、実際のテストでは大きく異なる結果が示されました:

• JavaScript は実行を開始しません。 CSSがダウンロードされます。
• したがって、JavaScript スレッドを長時間実行できるため、JavaScript を先頭に組み込んだ方が効率的であると思われます。

結論:

• デスクトップブラウザの場合: 最新のブラウザでは、JavaScript の前に CSS を置きますは パフォーマンスの向上をもたらします。場合によっては、パフォーマンスの低下を引き起こす可能性もあります (CSS が遅延する場合など)。したがって、 JavaScript ** の後に外部スタイルシート ** にリンクする必要があります。
• モバイル ブラウザーの場合: 一部のモバイル ブラウザー (WebKit for Android など) は依然として予測解析を行っていないという証拠があります。このようなブラウザでは、CSS の前にスクリプトを配置すると、パフォーマンスが低下する可能性があります。

技術的な説明:

• 従来のブラウザは、<script> タグに遭遇すると HTML の解析を停止し、スクリプトをダウンロードして実行します。 <link> に遭遇すると、CSS ファイルを取得しながら HTML の解析を続けます。 </script>
• 最新のブラウザは予測解析を実装しており、ブラウザは HTML を「予測」し、スクリプトを含むリソースを事前にダウンロードします。

ブラウザのサポート:

• 最新のデスクトップおよびモバイル ブラウザ (約 85%) は予測読み込みをサポートしています。

注:

• 古いブラウザーでパフォーマンスが問題にならない場合は、デスクトップ ブラウザーで CSS の後にスクリプトを配置するのが賢明な選択です。
• モバイル ブラウザーでは、デバイスやオペレーティング システムによってベスト プラクティスが異なる場合があります。

以上がHTML では CSS を常に JavaScript の前に置く必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。