フロントエンド開発で耳にするレンダリングについて書いていきます。
レンダリングとは？
レンダリングと言われるとピンとこないかもしれませんが、いつもインターネットで色々なサイトを観覧しているかと思います。
みなさんがいつも目にしているその画面上に映し出されているものが、レンダリングされた結果なのです。
ですので、画面に映し出されるまでにコンピュータが頑張ってやってくれている処理がレンダリングです。
結論：人が目で見て視覚的にわかる状態にするためにコンピュータが頑張って行う処理
ざっくりとした理解としては下記で問題ありません。
"レンダリング ＝ いつも目にしているWebページができるまでの処理（過程）"
ではどのようにして、いつもみている画面のようになっているのでしょうか。
みなさんが見ている画面上のものは、サーバに格納されているデータから構成されています。
HTMLやCSSと耳にしたことがるかと思いますが、HTMLやCSSといったデータをサーバから受け取りコンピュータが頑張って処理をした結果が、みなさんがいつも目にしている画面になっているのです。
【レンダリングの流れ（メインスレッド：Main thread）】
画面に表示されるまでに裏では下記の処理が行われています。
Parse > Style > Layout > Paint > Composite (+ JavaScript処理)
スマホやパソコンでWebサイトを観覧している時に動作がカクカクしていたり、画像表示がすぐにされない、最悪の場合、スクロールした先が真っ白になっているという状況を一度は見たことがあるかと思います。
これは、上記に記載した処理に時間がかかる事で起きている現象です。
では具体的な処理の中身について見ていきましょう。
【Parse】
Parseの処理では構文解析がされ、下記の2つの構築が行われます。
DOM Tree構築 --HTMLの構文解析
CSSOM Tree構築 --CSSの構文解析
構文解析や構築と言われるとパッとしないので、言い換えると画面に表示するために必用なもの準備ができたという認識で良いかと思います。
料理を例に、カレーを作る工程に当てはめると、カレーに必用な材料が揃ったぐらいの段階です。
【Style】
Parseの処理が行われた後にStyleという処理が行われます。
Styleという処理は、"DOM Tree" と "CSSOM Tre"を紐づける処理です。
カレーの工程に当てはめると、各材料を同じ鍋に入れた段階です。
肉、野菜、ルーがバラバラのままではカレーは完成しませんよね？
カレーを完成させるには一緒の鍋に入れて調理しなければなりません。
画面に映し出す為にStyleという処理でバラバラの"DOM Tree" と "CSSOM Tre"を紐づけをしているのです。
// 後日"Layout > Paint > Composite"についても書いていきます。