重要なレンダーパスを最適化するには

18356 ワード
render DCL テキストリンク

重要なレンダーパス


Critical Rendering Path


プライマリレンダーパスは
DOM parsingからレンダリングへのパス.
主なプロセス
  • domLoading:プロセス全体の開始タイムスタンプ.ブラウザは、最初に受信したHTMLドキュメントのバイトのグループ化を開始します.
  • dom Interactive:ブラウザがパケットを完了した時間を表示します.すべてのHTMLとDOMの作成が完了しました.
  • domcontentLoaded:DOMが準備完了し、スタイルシートがJavaScriptの実行をブロックしない時点が表示されます.これは、レンダリングツリーを作成できるようになりました.
    多くのJavaScriptフレームワークは、自身の論理を実行する前にこのイベントを待っています.したがって、ブラウザはEventStartとEventEndタイムスタンプを取得します.これにより、この操作を実行するのにどれくらいの時間がかかるかを追跡できます.
  • domComplete:名前のようにすべての処理を完了し、ページ上のすべてのリソース(画像など)のダウンロードを完了します(たとえば、ロードスクリューが回転を停止します).
  • loadEvent:各ページのロードの最後のステップで、ブラウザはonloadイベントをトリガーし、他のアプリケーションロジックをトリガーします.
    • HTML仕様は、イベントが発生した時間と満たすべき条件を含む各イベントの特定の条件を規定しています.ここでは、主なレンダリングパスに関連するいくつかの主なマイルストーンについて重点的に説明します.
  • domInteractiveはDOM準備完了の時点を表示します.
  • domcontentLoadは、通常、DOMおよびCSSOMの準備時間を表示します.
    解析器がJavaScriptをブロックしていない場合、DOMContent LoadはDOInteractiveの後に発生します.
  • domComplete表示ページとそのサブリソースの準備時間:
    • ソース

    測定パス


    Chrome DevtoolのLightHouseとPerformanceを使って、測定経路を簡単に見ることができます.(誰かが必要なら後で整理してあげます)
    じゃ、一人ずつ計算しましょう.

    1. HTML + Image

    <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Critical Path: No Style</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

    パフォーマンスモード



    ブルーラインDOMContLoad(DCL)レッドラインはonLoad(L)です.
    htmlの受信には205 ms、216 msでDCLイベントが発生し、受信画像には118 ms、335 msでLが発生する.
    ここから、イメージのダウンロードがParserをブロックしないことがわかります.
    ただし、onLoadイベントはイメージによってブロックされます.
    画像は初期レンダリングを妨げませんが、できるだけ早く描画する必要があります.

    2.HTML+画像+外部CSS+外部スクリプト

    <!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure Script</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
  </head>
  <body onload="measureCRP()">
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
    <script src="timing.js"></script>
  </body>
</html>

    パフォーマンスモード



    CSSとJavascriptを受信する2つのネットワークリクエストが追加されました.
    前述したように、CSSおよびJavascriptは、ParserをロックすることによってDCLを遅延させる.
    では、ここでasyncをscriptに入れるとどうなるのでしょうか.

    パフォーマンスモード



    Parserがロックされていないため、DCLはDOMをロードし、ほぼすぐに発生します.L発生時間に差はない.
    また、Media Queryを使用して必要に応じてCSS要素を分割すると、パフォーマンスモードは次のようになります.

    パフォーマンスモード



    3.HTML+画像+インラインCSS+インラインスクリプト

    <!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure Inlined</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
      p { font-weight: bold }
      span { color: red }
      p span { display: none }
      img { float: right }
    </style>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
    <script>
      var span = document.getElementsByTagName('span')[0];
      span.textContent = 'interactive'; // change DOM text content
      span.style.display = 'inline';  // change CSSOM property
      // create a new element, style it, and append it to the DOM
      var loadTime = document.createElement('div');
      loadTime.textContent = 'You loaded this page on: ' + new Date();
      loadTime.style.color = 'blue';
      document.body.appendChild(loadTime);
    </script>
  </body>
</html>
    HTMLのサイズは大きくなりますが、ロードする要素がないため、DCLはHTMLをロードした直後に有効になります.(例ではCSSやScriptは簡単で問題はありませんが、実際にはHTMLなので問題になるのではないでしょうか?)
    ここまでたくさんの文章を書いてしまい、少し申し訳ありませんが、まだ終わっていません.
    次の文章では、最終的に疑問を持ってその疑問を解決する過程を整理します.ううう
    (思ったより書く時間が多く、勉強も丁寧になりました)

    予告編:DOM/CSSOM部分とRender TreeをしてLayoutとPaintをするというわけではありません!!

    02 Git : Gitリモコンとギタブ
    地獄