ブラウザの動作原理(5)-レイアウト

렌더러を生成してツリーに追加した場合、크기および위치に関する情報はありません.これらの値を計算したのは배치(layout)と리플로우(reflow)です.
HTMLは、ストリームベースの배치(layout) 모델を使用しており、これは、通常、位置情報を単一パス(single pass)で計算できることを意味する.
通常、흐름では、後者の要素は前の要素の位置およびサイズに影響を及ぼさないため、配置は좌->우または위->아래に進む.HTMLのtableは、1つ以上のパスが必要であるため、例外的に含まれています.좌표계(coordinate system)は、上部(top/y)および左側(left/x)座標を使用して、기준점(root frame)に対する位置を決定する.배치は、htmlから始まる反復的なプロセスであり、HTMLドキュメントのroot 렌더러要素に相当する.배치は、フレーム層の一部または全部を繰り返して、렌더러の크기または위치の情報を計算する.root 렌더러の座標は0,0であり、ブラウザウィンドウの可視面積と等しい.
すべての렌더러にはlayoutまたはreflowメソッドがあり、各렌더러はサブオブジェクトのlayoutメソッドを呼び出します.

デュアルビットシステム

簡単な変更でブラウザ全体を再配置しないように、デュアルビットシステムを使用します.変更または追加された렌더러は、自分と自分の子供더럽다고(汚れている=再構成が必要)を表示します.
2種類のflagを使用します.それぞれ더티と자식이 더티함です(レンダラー自体は良いですが、少なくとも1人の子供が再構成する必要があります)

グローバル導入とインクリメンタル導入

배치は、렌더 트리全体にわたって発生する可能性があり、전역 배치と呼ばれる.この状況は、次の場合に発生します.

렌더러を変更すると、フォントサイズの変更など、すべての전역 스타일に影響します.

画面サイズ変更により

배치は、더티 렌더러が導入された場合にのみ점증となります.さらなる導入が必要なため、損失が発生する可能性があります.점증 배치は汚れているときは非同期です.例えば、ネットワークから追加のコンテンツを受信し、렌더러に追加した後、新しいDOM 트리(ダーティとみなされる)をレンダーツリーに追加する.

非同期配置と同期配置

렌더러非同期で動作점증 배치は파이어폭스に점증 배치命令が積み重ねられており、スケジューラは1回(バッチ)でこの命令を実行することができる.reflow度웹킷を実行するタイマーを持ち、ツリーにナビゲートして점증 배치を配置します.더티 렌더러などのスタイル情報を要求するスクリプトは、offsetHeightを同期して実行する.점증 배치は主に同期して実行される
場合によっては、スクロール位置の変化などのいくつかのプロパティのため、最初の配置後、展開は전역 배치で実行されます.

最適化

callbackがサイズ変更またはレンダラーの位置変更によって実行される場合、배치のサイズは再計算されず、キャッシュから取得されます.
場合によっては、ルートではなくサブツリーのみが変更されます.これは、入力フィールドにテキストを入力するときに発生します.その変化範囲は限られているため、周囲の環境に影響を与えません.入力フィールドの外にテキストが入力されている場合はrootから開始します.

配備プロセス

導入プロセスは主に以下の形式で行われます.

親レンダラーが自分の幅を決める

親が子供を審査
2-1. サブレンダラーの配置(設定렌더러、x)
2-2. 必要に応じて、高さ(親と子の汚れ、グローバル展開ステータスなど)を計算するために子展開を呼び出すことができます.

親は、yおよび여백(margin)を使用して、子供の重なりの高さを設定する.親レンダラーの親はこの値

を使用します.

ビットタグ

を削除패딩(padding)は、配置(=파이어 폭스)のパラメータとして상태(state) 객체(=nsHTMLReflowState)を使用する.ステータスオブジェクトには、親オブジェクトの幅が含まれます.reflowの導入結果は파이어 폭스であった.このオブジェクトの計算高さは매트릭스(metrics) 객체(=nsHTMLReflowMetrics)です.

幅の計算

렌더러の幅は、렌더러および컨테이너(포함하는 블록)의 너비として計算される
例えば、次の렌더러의 너비(width), 여백(margin), 경계선(border)要素がある場合:

<div style="width: 30%"/>

divは以下のように計算される(웹킷類のRenderBox方法)
容器の幅はcalcWidth〜0の間の最大値である.この場合、availableWidthの計算は以下の通りである.availableWidth clientWidth() - paddingLeft() - paddingRight()およびclientWidthは、枠線およびスクロールバーを除く内部領域を表す.
要素の幅はclientHeight属性の値です.ここで、コンテナ幅のパーセントは絶対値に変換されます.
水平(左右)の幅とダウンジャケットの値を追加
ここではwidthの計算ですが、미리 획득한 너비(clientHeight)と최소 너비を計算する必要があります.최대 너비が最大幅より大きい場合は最大幅が使用され、미리 획득한 너비が最小幅より小さい場合は(最小単位で除算しない)、最小幅が使用されます.미리 획득한 너비が必要な場合、これらの値はキャッシュに格納されますが、幅は変わりません.

改行(Line Breaking)

배치が配置中に改行する必要がある場合、렌더러は停止し、親(伝播)に転送する必要がある.親は、追加の배치を生成し、렌더러を呼び出します.

コメントとソース

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
https://d2.naver.com/helloworld/59361