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

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

結論

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Mary-Kate Olsen

Nov 29, 2024 pm 04:14 PM

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。