JS|プレゼンテーションブラウザ

6201 ワード
JavaScript テキストリンク

レンダーパス全体(Whole Render Passes)



ブラウザがHTMLファイルを取得して画面に表示critical rendering pathだそうです.critical rendering pathDOM->CSSOM->RenderTree->Layout->Paint->Composite.
シーケンスが完了すると、レンダリングが完了し、それが表示されます.

1. DOM (Document Object Model)


DOMはブラウザからロードされます.それぞれのIDE(Integrated Development Environment)で作成されたHTMLはDOMではなく、ブラウザで実際のドキュメントを解析して表すノードツリーはDOMです.さらに、これらのDOMはJavaScriptであり、ドキュメントにノードを追加、削除、変更、イベント処理、および変更できるAPIを提供します.

DOMの形成過程はconvert->タグ->ノード化->DOMの順である.convert:ブラウザは、HTMLのPrimitiveバイトをディスクまたはネットワークから読み取り、指定したファイルにエンコードし、単一の文字に変換します.tokenizing:単一変換文字 W 3 C HTML 5規格で指定された文字列を一意のタグに変換します.Node화:変換されたタグは、属性およびルールを定義するノードオブジェクトに変換されます.DOM Tree:HTMLに表記する場合、タグ間で関係を定義して親子関係を形成します.これらのオブジェクト関係はツリー構造のように接続されています.

2. CSSOM

CSSもDOMのようにJavaScriptが理解できる対象になるようにしなければならない.
DOMを構成すると、文書のヘッダ部分にCSSスタイルシートを参照するリンクタグが見つかった場合、style.cssファイルに要求が送信され、値が返されます.

DOMの形成過程と同様に、下図のようなCSOMツリー構造に接続されている.

3. Render Tree


DOMツリーとCSSOMツリーが完了すると、両方のツリーが結合してレンダーツリーが形成され、レンダーツリーを構築するためにブラウザが実行します.
  • DOMツリーのルート(html)からノードのループを開始します.
  • ノードの一部はレンダリング出力に反映されないため省略されます(ex:scriptラベル、metaラベル).
  • 部分ノードはCSSで非表示になり、レンダリングツリーでも省略されます.例として、レンダーツリーにアトリビュートdisplay:noneを設定する明示的なルールが欠けているためです.

  • 表示される各ノードに対応するCSSOMルールを適用します.

  • 各コンテンツと計算スタイルを表示できるノードを返します.

    • 4. layout


    [Render Tree]で表示すべきノードとスタイルは計算されますが、ブラウザビューポート内の正確な位置とサイズは計算されません.
    各ページが個体の正確な大きさと位置を把握するために計算されるのはlayoutと呼ばれる.layoutはボックスモデルで表され、テキスト、画像要素が画面に占める領域、余白、スタイル属性に基づいて計算され、cssでは%、em、remなどの相対単位が使用され、ビューポートに基づいて画素単位に変換される.
    <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>

    前のページの本文には2つのネストdivが含まれています.
    最初の(親)divは、ノードの表示サイズを表示領域幅の50%に設定します.
    2番目のdiv(サブアイテム)幅を
    子は親の50%でなければならないので、ビューポート幅は自動的に25%に計算されます.

    5. paint


    最後に表示されたノード、計算されたスタイル、レイアウトの位置が分かったため、画面上で実際の画素に変換された描画プロセスがpaintと呼ばれる.paintは、ブラウザにおいて、レイアウトプロセスの後に決定された基準または必要に応じてレイヤを生成する.
    Layerは,塗りつぶす領域を分け,合成のみを準備する過程である.
    layerを行う理由は、メンテナンスを容易にするためです.1つの要素の一部にエラーが発生した場合は、layer全体を変更することなく、グループのlayer部分を変更するだけです.

    6. composition


    compositionは、z-indexまたは影響属性値に基づいてブラウザに各レイヤの要素をマークするプロセスである.

    UI更新の3つのケース


    1.Layoutが再発


    layoutが再び発生した場合、主に要素のサイズまたは位置が変更された場合、およびブラウザウィンドウのサイズが変更された場合に発生する.
    要素を変更する必要がある場合は、layoutの数値を再計算し、それに応じてpaint、compositeのプロセスを再計算する必要があるため、最悪と言える.

    2.Paintから再起動


    paintが再生成されると、背景画像やテキストの色、シャドウなど、レイアウト値を変更しないスタイル変更が発生する.

    3.構成から再発生


    Composition万が再び発生したのは、ペンキ中の層がcomposition段階で層の合成のみが再発生したことを意味する.(ex.translateプロパティを使用する場合は、ボックスモデルレイヤを移動するだけです)compositionはLayoutとPaintを実行せず,層の合成のみを行うため,性能上大きな利点がある.
    参考資料
    エレガントなテクノロジー-チェップをレンダリングするブラウザ
    Critical Rendering Path - By Ilya Grigorik
    白俊2874号ゲームを作った東俊.
    Position