0.はじめに
この前Flutterを学習していたら、たまたまレンダリングの知識に出会った。「そういえばとある仕事でレンダリングにだいぶ悩まされたな〜、しかも結局あやふやなまま終わった...」と思い、それではいけないと改めてレンダリングの知識について調べてみた。
1.0 そもそもレンダリングとは
レンダリングとはWebページを表示するための工程の１種で、「HTMLやCSSなどのプログラム上のコードを解析し、人間の目に見える形で画像などを表示すること」である
2.0 レンダリング処理は大きく4つの処理に分かれている
調べてみると、レンダリングには大きく4つの処理が動いているみたい。それがこちら
1 Loading
2 Scripting
3 Rendering
4 Painting
2.1 Loading
このLoadingは主にdownloadとparsingの処理に分かれていて、downloadでは「HTMLなどのファイルを読み込みこむ処理」がおこなわれ、parsingでは「HTMLをDOMツリーに、CSSをCSSOMツリーに変換する処理」がおこなわれる。
※実はここがscriptタグをbody最下部に書くようにいわれる所以で、HTMLをパースしている際にscriptタグを見つけたら、それを優先して読み込もうとする。そうなると、ページを表示するのが遅くなる。だからscriptタグは最後に書こうねというお話です
2.2 Scripting
これはJavascriptのコードをJavascriptエンジンに引き渡して実行させる処理
2.3 Rendering
ここではDOMツリーに対して、どのようなCSSプロパティが当たるのかを計算し、レイアウト情報の計算をおこなう。
2.4 Painting
実際に、描画がおこなわれる処理
これでレンダリング完成
3.0 実際にみてみよう
適当なWebページを開き、F12キーで開発者ツールをひらく。そしてその中の「Performance」をひらき、shift+⌘Eを押す。
すると以下の画像のようなものやその他たくさんのものが表示されている。
4.0 レンダリングエンジンについて（おまけ）
最後にレンダリングエンジンについてみていく。レンダリングエンジンとは、レンダリングをおこなうソフトフェアのこと
ブラウザによってレンダリングエンジンの種類が異なる。（例えばGoogle ChromeだとBlink、Safariだとwebkit)
レンダリングエンジンによって、処理速度や見え方が違うみたい。（細かな違いはわからないが...）
5.0 最後に
ここまでレンダリングエンジンについてみてきたが、かなり興味深いものだった。
Webアプリを開発していて、iphoneとandroidで画像などの見え方が全く異なっていた理由がわかった気がした。調べてよかった。また色々と投稿していきます！