分かりそうで分からない、レンダリングについて

#自己紹介
むちゃんです。
関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪の2回生です (2020.10.7現在)

イベントなど回っているので是非大阪辺りの方は会いましょう！!

#なんでエディタにコードを書くと表示されるの?
皆さんはこんな疑問は持ったことはないでしょうか?
知っているようで知らない方が多いいと思ったので今回はこれを題材にして説明していきたいと思います

ひとまずこの表をご覧ください。

#1...レンダリングとは?

WebブラウザはWebサーバーからの情報を受け取ってhtml、css、JavaScript、
画像はjpeg、png、gif、svgの情報を解析してコンテンツを画面に表示します。
このときブラウザがWebサーバーから受け取る情報は、
私たちが見ることができるように情報を成型してブラウザに表示させてます。
それらのデータを元にして表示内容を作るのが「レンダリング」

※簡潔に言うと
WebブラウザがHTMLデータを解析して画面に表示することをレンダリングと言う。

⚫️それでは詳しく説明していきたいと思います。

#2...レンダリングの流れ?

※レンダリングはこのような4工程で行われます！！

もう少し詳しくみていきたいと思います...

4工程の中にもぞれぞれ様々な役割を持っていす。

それらを少し深く掘っていきたいと思います。

●Loading (リソースを読み込み)
　-Download
　-Parse
●Scripting（JavaScriptを実行）
●Rendering（レイアウトツリー構築）
　-CalculateStyle
　-Layout　
●Painting（レンダリング結果の描画）
　-Paint
　 -Rasterize
　-CompositeLayers

##1.Loading

###① Download
####Downloadとは?
~リソースのダウンロードする。

つまり…

・HTMLファイル
・CSSファイル
・JavaScriptファイル
・画像ファイル
をサーバからダウンロードする。

###② Parse

Parseとは?

~XMLファイルの中身を使いやすくする事。

####Parse流れ
・字句解析してASTを作成

・ASTを元に、DOMTreeを作成

　※字句解析=ソースコードをトークン列
　※AST=オブジェクト

[JSコードをASTコードに変換]
リンク:https://astexplorer.net/

##2.Scripting　(JS自体の実行)

###Scripting流れ

JavaScriptのコード → 字句解析 → トークン列
　→ 構文解析(AST) → 抽象構文木(オブジェクト) → コンパイル → 実行可能コード → 実行

Lodingまではレンダリングエンジンがやっていたが
ScriptingではJavaScriptエンジンに引き渡せられる❗️

##3. Rendering　(レイアウトツリーの構築)

####CalculateStyle
・Style sheetを元に CSSOMってのを作成
・DOMのtreeに対して当て込み、当て込まれた状態のNodeをComputedStyleと言う

　※CSSOM=ブラウザでロードされたCSSツリーを構造を保持する仕組み(DOMに似ている)
####Layout

・Layoutは要素のレイアウトをする。
・Layoutされたら、LayoutTree出来上がる。
・作成されたLayoutTreeから Layering(レイヤリング) をし、別々で描画できる場所は別々で描画する。
・Layeringされた Layer を使ってOpenGLを使って画面に描画する。

　Layoutは要素のレイアウトをするとは？
　・要素の大きさ
　・要素のmargin
　・要素のpadding
　・要素の位置
　・要素のz軸の位置
　これらの情報から何処の要素をおくのかを計算する

##4. Painting　(レイアウトツリーの構築)
先ほどまでやってきた流れの集大成としてレンダリング結果を描画します。

####Paint
2Dグラフィックエンジンに命令はしますが、グラフィックエンジンというのはブラウザによって違う場合があります。
####Rasterize
生成された命令を用いて実際にピクセルへと描画する。
そしてレイヤーで描画するレイヤーを生成しますが、
レイヤーの適用される要素はpositionとかtransdorm、opacityなど位置決めや背景の透明にするスタイルです。
####CompositeLayers

ピクセルにしてレイヤーを合成させてから最後にレンダリングの結果が生成されます。
ちなみに合成するときに、CPU合成とGPU合成がありますが、
CSSのtransformプロパティに変形関数をつけたりして条件が合うとGPU合成されます。
基本的には2D合成です。

#レンダリング完成❗️❗️❗️

大体こんな流れです…
意外とコードを書いてから表示されるまでの流れを分からない方もいるので今回作成しました！！
これをキッカケに色々検索してみてください😁

#あとがき
今回は自分なりにレンダリングについて簡潔にまとめてみした

次回はまだTCP/IPについてまとめてみたいと思います。

Twitter @HomgMuchan ぜひフォロー待っています❗️