Web ページのレンダリング パフォーマンスを最適化するには、CSS よりも JavaScript を優先する必要がありますか?

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

の JavaScript の前に CSS を含めるべきであるというアドバイスがよく与えられます。ウェブページの。これは、レンダリング スレッドにはページのレンダリングに必要なすべてのスタイル情報があり、JavaScript エンジンは続行する前に含まれるすべての JavaScript を解析する必要があるため、ページのレンダリングに遅延が生じるという推論によって裏付けられます。

しかし、実際のテストでは異なる結果が示されます。 JavaScript インタプリタは、すべての CSS がダウンロードされるまで待ってから開始するようです。つまり、最初に JavaScript を組み込むと、JavaScript スレッドの時間をより効率的に使用できるようになります。

これをさらに詳しく調べるために、具体的な例を見てみましょう。次のページ構造を考えてみましょう:

  
    <title>test</title>
    <script type="text/javascript">
      var startTime = new Date();
    </script>
    <link href="http://10.0.0.50:8081/test.css?delay=500" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="http://10.0.0.50:8081/test2.js?delay=400&jsdelay=1000"></script>
  
  
    <p>
      Elapsed time is:
      <script type="text/javascript">
        document.write(new Date() - startTime);
      </script>
    </p>
  

CSS が最初に含まれている場合、ページのレンダリングには 1.5 秒かかります。 JavaScript が最初に含まれている場合、ページのレンダリングには 1.4 秒かかります。この実験は、JavaScript を優先することでページのレンダリングが高速化できることを示しています。

結論

実際のテストに基づくと、JavaScript インクルードの前に CSS インクルードを配置するという推奨事項は、最新のブラウザーのパフォーマンスにとって最適ではない可能性があります。 JavaScript を組み込むと、JavaScript スレッドの動作時間が長くなり、効率が向上するように見えます。これは、

に必須の JavaScript と CSS が含まれるコンテキストに特有のものであることに注意することが重要です。ドキュメントの

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