ブラウザレンダリングの仕組み!

2020.9.102020.9.17Writer: tamakiComment: 0

こんにちはKOです。
フロントエンジニアとして働き始めて半年が経とうとしています。
それでもまだ自分が書いたjs,css などが何を経由してブラウザへと表示されるか理解できていないのです。。

調べている中で「レンダリング」という言葉が出てきたので
今回はレンダリングについてまとめさせていただきました。

別の記事で細かく解説しています。
https://tech.pla-cole.co/flame/

レンダリングの意味(webio辞書)

①（デザイン・建築関係で）完成を予想して描いた透視図。完成想像図。また，それを描くこと。
②（油脂などを溶かして）精製加工すること。煮沸処理をして肉骨粉を製造すること。

1 2	①（デザイン・建築関係で）完成を予想して描いた透視図。完成想像図。また，それを描くこと。 ②（油脂などを溶かして）精製加工すること。煮沸処理をして肉骨粉を製造すること。

サーバーからレスポンスとして返ってきたhtml,cssをウェブ上に表現するまでの流れをレンダリングと読んでいますが、他にもいろんな意味があるようでした。

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

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

１loading
　・download
　・parse
２scripting
３rendaring
　・calculate style
　・layout
４painting
　・paint
　・rasterize
　・composite layers

１loading

　・download

　・parse

２scripting

３rendaring

　・calculate style

　・layout

４painting

　・paint

　・rasterize

　・composite layers

このうちいくつかを説明していきたいと思います。

Download

リソースとは主に上記の四つです。

●HTML（HyperTextMarkupLanguage）ファイル
●CSS（CascadingStyleSheets）ファイル
●JavaScriptファイル
●JPEG、PNG、GIF、SVGなどの画像ファイル

ブラウザはurlを元にレンダリングに必要なリソースを様々なネットワークプロトコルを通じて取得します。

Parse

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

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

Parseをすることによって次の段階である scriptiongで、HTNLとCSSが操作しやすい状態に変換されるのです。

Style

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

マッチング自体は総当たりで行われるので
もし、タグが100個あり、cssスタイルセットも100個あれば 10000の計算処理が飛び交います。

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

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

Layout

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

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

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

1	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://saruwakakun.com/design/photoshop/lusterize

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

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