[Browser] How browser works (6) - Painting, and Rendering engine's thread

この記事は、Tali Garsielの「How Browsers Work: Behind the scenes of modern web browsers」を翻訳したものです.
Painting
ステップPaintingにおいて、Render treeのrendererメソッドが循環的に呼び出される.
Global and Incrementalpainting()と同様に、LayoutとGlobal paintingがあります.Incremental paintingは、ツリー全体に影響を及ぼさずに変更されます.変更されたIncremental paintingは長方形を無効にし、オペレーティングシステムはこの領域がrendererであると判断し、rendererメソッドを呼び出す.オペレーティングシステムは、1つずつ処理するのではなく、いくつかの領域を統合して処理します.ローマでは、dirtyはメインプロセスに含まれていないため、より複雑です.Chromeはオペレーティングシステムの動作に従い、paint()はここで発生したイベントをrenderに転送する.ツリーは、イベントに関連するpresentationに到達するまでツリーを巡り、Render rootに配置される.
The painting order
CSS説明ではrendererの順序が定義されている.これはrepaintに積まれた順番です.paintingスタック内のスタックの順序は次のとおりです.

background color

background image

border

children

outline

Firefox display list
Firefoxは、stacking contextから描画された矩形のBlock rendererを生成する.このリストは、長方形に関連するRender Tree、例えばdisplay listおよびbackgroundを正確な順序でリストする.リストのおかげで、ツリーを1回回るだけでborderのプロセスを完了できます.
Firexfoxは、他のrendererの下のrepaintのように見えないelemntsを添加しないことによって最適化される.
Webkit rectangle sotrage
Webkitはelementsの矩形をelementsとして記憶する.新しい長方形に比べて、他の部分だけがrepaintです.
Dynamic changes
ブラウザは、bitmapの変化がrepaint万colorになるなど、最小限の動作で変化に応答しようとしている.elementの変化はrepaintだけでなく、子供と兄弟のpositionとelementも生じた.DOMノードを追加すると、ノードのlayoutおよびrepaintになります.layoutのフォントサイズの変更などの重大な変更が発生した場合、キャッシュは無効になり、repaintの合計はhtml elementとrender treeになります.
The rendering engine's threadsrelayoutは、単一スレッドを返します.ネットワーク通信などのタスクを除いて、ほとんどのタスクはこのスレッドに返されます.FirefoxとSafariでは、repaintがブラウザのメインスレッドです.Chromeは各タブのメインスレッドです.ネットワーク通信はいくつかの異なるスレッド間で行われ、これらのスレッドの数は通常2〜6個に制限される.
Event loop
ブラウザのプライマリ・スレッドはRendering engineと呼ばれます.これは、プロセスが継続的に実行され、Rendring engineおよびevent loopのようなイベントが発生したときに処理される無限ループです.Firefoxのコードは次のとおりです.

while (!mExiting)
	NS_ProcessNextEvent(thread);

参考資料
How Browsers Work: Behind the scenes of modern web browsers
ブラウザはどのように動作しますか?