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

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

Mary-Kate Olsen

リリース： 2024-11-29 16:14:10

オリジナル

703 人が閲覧しました

Should JavaScript Precede CSS for Optimal Web Page Rendering Performance?

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <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>
  </head>
  <body>
    <p>
      Elapsed time is:
      <script type='text/javascript'>
        document.write(new Date() - startTime);
      </script>
    </p>
  </body>
</html>

ログイン後にコピー

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

結論

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

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