JS - Browser rendering process
☄️ Browser rendering process
👉 詳細は次の1つずつ開きます...
📍HTML parsing & DOM
HTML parsing
htmlは文字列からなる純粋なテキストです.ブラウザで読み取り可能な方法でレンダリングするには、htmlドキュメントをオブジェクトオブジェクトオブジェクトオブジェクトオブジェクトオブジェクトオブジェクトオブジェクトオブジェクトオブジェクトオブジェクトに変換し、メモリに格納する必要があります.
ブラウザレンダリングエンジンは、htmlドキュメントを以下の方法でグループ化し、ブラウザが理解できるデータ構造=>DOMを生成します.
parsing process
バイト>文字>タグ>ノード>DOM
サーバ上に存在するhtmlファイルはブラウザリクエストに応答します.
サーバは、ブラウザが要求したhtmlファイルを取得してメモリに格納し、インターネット(バイナリ)を介してメモリに格納されたバイトに応答する.
2.メール
<html>.....</html>応答バイト形式のhtmlドキュメントはmeta charset tag attributeによって指定され、<meta charset="UTF-8">(例えば、content-type: text/html; charset=utf-8 )が応答ヘッダに含まれて応答する.ブラウザは文字列をチェックして返します.3.コイン
文字列に変換されたhtmlドキュメントを読み込み、構文的な最小単位tokenに分解します.
startTag: 'html'
contents: {
startTag: 'head'.
contents: {....},
....
endTag: 'html'
}上の各タグを変換してノードを作成します.タグの内容に基づいて、ドキュメントノード、要素ノード、属性ノード、テキストノードを生成します.このノードはDOMコンポーネントの基本要素になります.htmlから書き込まれたタグはJSでNodeというobjに変換される(
html内の要素間の親子関係を反映し、すべてのノードをツリー構造にします.これらのノードからなるツリーデータ構造をDOMと呼ぶ.
つまり。DOMはHTMLドキュメントを分割する成果物です...
📍CSS parsing & CSSOM
**CSSがロードされたリンク、スタイルラベルに遭遇した場合、DOM=>cssの作成を停止し、スタイルラベル内のリンクのhref指定ファイルをサーバに要求することで、cssのスライス=>CSOMの作成を開始します.
📍DOM+CSSOM = Render tree
opacity: 0; visibility: hidden; = included in render tree
display: none; = excluded in render tree
写真ソース:ドリームエンコーディングフロントエンド必須ブラウザ101
📍Critical rendering path
上記のレンダーパスは繰り返し実行できます.
例えば、JSがノードを追加、削除、ブラウザウィンドウのサイズを変更する場合、htmlレイアウト(位置、サイズ)の幅、高さ、余白、padding、border、displayなどのスタイルを変更する場合...
でも!!!レイアウト、塗りつぶし(レンダリングツリーの再描画)を再実行する場合は、パフォーマンスに悪影響を及ぼさないようにします.
Critical rendering path
1)要求/応答:html、css、imgファイルなどのサーバにリソースを要求する
2) Loading
3)Scripting:レンダリングエンジンが逐行解析してDOM要素に変更する
👇Operation part:レンダーツリーを使用して構造を作成し、レイアウトを計算し、ブラウザで画像を描画およびレンダーする部分.
4)レンダリング:ウィンドウタグ用のレンダリングツリーを作成する
5)Layout:CSSスタイルで、DOMを含む情報に基づいてウィンドウのレイアウト位置と構成サイズを計算します.
6)Painting:画面にピクセルをレンダリングします.
計算した子供たちは直接絵を描くのではなく、私たちがどのように要素を手配したのかによって、各部分を小さく切ってimgを用意します.(各要素をビットマップと呼びます.)
Z-indexのみでペイントを準備するブラウザ
どうしたんですか.ブラウザのパフォーマンスを向上させる準備をします.
will-change値を使用すると、ブラウザはレイヤーを事前に準備します...レイヤの乱用が多すぎると、パフォーマンスが低下します.
7) composition
レイヤーを順番にブラウザに配置します.z-インデックス別!
画像ソース:DREAM符号化フロントエンド必須ブラウザ101について説明中
conclusion
Reference
この問題について(JS - Browser rendering process), 我々は、より多くの情報をここで見つけました https://velog.io/@khg04170/JS-Browser-rendering-processテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol