したぬり

注(https://d2.naver.com/helloworld/59361)

DOMツリーを構築するためのHTMLパケット

レンダリングツリー構築

レンダーツリー配置

描画

レンダリングツリー

렌더링 엔진은 HTML 문서를 파싱하고 "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환한다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱한다. 스타일 정보와 HTML 표시 규칙은 "렌더 트리"라고 부르는 또 다른 트리를 생성한다.

렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시된다.

렌더 트리 생성이 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미한다. 다음은 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정이다.

일련의 과정들이 점진적으로 진행된다는 것을 아는 것이 중요하다. 렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.

Repaint

塗装はレイアウトに影響しませんが、可視性に影響する塗装が変化すると発生します.
たとえば、不透明度、背景色、可視性、outline
Operaによると、「ブラウザはDOMツリー内の他のすべてのノードの可視性をチェックする必要があるため、ペンキを塗り直すコストが高い」という.と言います.

Reflow

[更新](Refresh)は、すべてのエンティティの位置や長さなどを再計算し、ドキュメントの一部またはすべてを再レンダリングします.
個々のレイヤーを変更すると、サブレイヤーまたは親レイヤーにも影響します.
ワークフローがトリガーされると
DOMエイリアスの追加、削除または変更
CSSスタイルの追加、削除または変更
CSSスタイルを直接変更したり、クラスを追加したりしてレイアウトを変更することができます.エンティティの長さを変更すると、DOMツリー内の他のノードに影響します.
CS 3アニメーションとトランザクション
アニメーションの各フレームには、リフローが発生します.
オフセット幅とオフセット高さの使用
offsetWidthプロパティとoffsetHeightプロパティを読み込むと、初期リフレッシュがトリガーされ、数値が計算されます.
プレイヤーアクション
ユーザーインタラクションによるサスペンション効果をアクティブにしたり、フィルタにテキストを入力したり、ウィンドウのサイズを調整したり、フォントのサイズ、スタイルシート、フォントの切り替えを変更したりすることで、リターンをトリガーできます.