tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

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

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

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

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

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

レンダリングの基本的な流れ

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

1Parse
2Style
3Layout
4Paint
5Composite

Parse

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

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

Style

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

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

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

Layout

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

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

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

Paint

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

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

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

Composite - コンポジット

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

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

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

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

おしまい

参考

https://www.wave-inc.co.jp/data/illustrator/rasterize.html#:~:text=%E3%83%93%E3%83%83%E3%83%88%E3%83%9E%E3%83%83%E3%83%97%E5%8C%96%EF%BC%88%E3%83%A9%E3%82%B9%E3%82%BF%E3%83%A9%E3%82%A4%E3%82%BA%EF%BC%89%E3%81%A8,%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E3%81%AE%E9%98%B2%E6%AD%A2%E3%81%A8%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

https://qiita.com/codemafia0000/items/caed57ec30d638e40728

https://developers.google.com/web/fundamentals/performance/rendering?hl=ja