レンダリングエンジン、、レンダリングって

タイトルからわかる語彙力のなさ笑

chromeなどのブラウザにはレンダリングエンジンというものがあります。

これは、要求されたHTMLとCSSを解析し、表示する役割をになっているのですが
具体的にどのような工程を辿っているのでしょうか、、、

最近よく聞くのでまとめてみました。

「レンダリング」は次の五つの工程になります。
初期表示した際はこの五つの全ての工程が行われますが
画面の表示内容に更新があった場合は必要な工程のみを処理して、再計算が不要な工程は省略します。

１Parse
２Style
３Layout
４Paint
５Composite

cssとhtmlを解析して「DOMtree」「Style Rules」を作成します。

DOMはDocument Object Model の略で
HTMLの中で入れ子になっている部分を「枝」その中にあるテキストを「葉」としてツリー上に構成したものです。

ParseによってHTMLとCSSから二つのツリーが作成されると
次は二つのツリーをつなぎ合わせてスタイルと要素のマッチングが行われます。

こうして出来上がったツリーをレンダーツリーと呼ばれるのです。

そしてこの工程はjavascriptのDOM操作やcssの変更を行うと自動的に呼ばれます。

ここでは各要素の大きさと高さの計算を行います。そして、どのスタイルを適応させるかを考慮されたLayout treeが作成されます。

以下のプロパティーの変更があったときに処理が呼ばれます。

height, width, padding, margin, top, right, left, bottom, box-shadowなど

Paint Records と呼ばれる、画面への描写処理の順番などの指示書が作成されます。
このときにはz-indexなどの要素の重なりなども考慮されます。

同時に Layer Tree を作成します。これは、高さや幅などが他に影響しあうまとまりを一つのレイヤーとして
複数のレイヤーを作成します。要素に変更があると、全てを変更するのではなくそのレイヤーだけを変更することで
計算量する少なくすることができます。

transformや translateZ などを検知するとレイヤーが作成される他、
will-changeを検知すると新たにレイヤーが作成されます。

こちらでは、先ほど作ったレイヤーにラスタライズ処理を加えていきます。
ラスタライズ処理はビットマップ化とも呼ばれており、
パスデータを画像化してデータ自体を軽量化する処理のことです。

これはすごく計算量が多いので
Raster Thread
と呼ばれるスレッドが代行してくれます。
そしてこのスレッドは四つが並行して処理してくれるのです！！！

この五つの工程をへて初めてGPUに渡されます。

ちょっとチンプンカンプンなところの説明はハショりましたが
五つの工程でレイヤーや指示書を作成して
それをラスタライズしてGPUに渡される感じですね、、、

おしまい

参考

tamakipedia