[web基礎]HTTP通信とブラウザレンダリングの仕組みについて
ブラウザレンダリングの仕組み
初めに
Developer Roadmapsの内容を順にやってい流ものの内容になります。
[過去内容]
Developer Roadmapsは、成長していくために必要な要素や、
学習の内容が網羅されているもので、基礎になるので、皆様もぜひ！一緒にアウトプットしましょう！笑
今回は前回のHTTP通信の仕組み / ホスティングとドメインの関係性に引き続き、
ブラウザレンダリングの仕組みについて、書いていこうと思います。
そもそもブラウザとは -ブラウザの内部とは
■ ブラウザとは何か。
インターネットを介してホームページ（Webサイト）をパソコンやスマートフォンで
閲覧するためのソフトウェアのこと
Webブラウザとも呼ばれ、Chromeやsafari、Internet Explorerなどが有名.
■ ブラウザの主な構成要素
ブラウザの主な構成要素は以下のようになります。
上記のような要素で構成されている。
-
UI: ユーザーインターフェイス
一般的にユーザー（利用者）と製品やサービスとのインターフェース（接点）すべてのこと。 -
ブラウザエンジン
UIとレンダリングエンジンの間の処理、整理。 -
レンダリングエンジン
何かを整形し、描画するのが仕事の機能や機械、プログラムのこと。
要求されたコンテンツ(HTMLなど)の表示を担当する。 - ネットワーキング
-
JavaScriptインタープリタ
JavaScript コードの解析と実行。 - データ ストレージ
本題：レンダリングの仕組み
"指定したリソースをブラウザ画面に表示すること"がレンダリングだ。
以下のような流れで行われる。
先日、HTTP通信の仕組みについて記事を書いたが、そこでできた後に、レンダリングを行う。
"ブラウザのパフォーマンスを最大限に引き出す"ためにも大切.
1. Parse（パース）
Parseとは：
英語直訳：
プログラムを解析し、例えばブラウザー内の JavaScript エンジンといった実行環境で、
実際に実行できる内部形式に変換すること。
ブラウザーは HTML を解析 (en-US)して DOM ツリーに変換します。
■ 補足： Parsingして、DOMtreeの作成
そもそもDOMと、DOMツリーという言葉の意味は...
■ DOMとは？
HTMLなどの文章を扱うための手法の１つ。
HTMLをJavaScriptから参照、更新するためのインターフェイス
(HTMLは文章であって、JavaScriptでHTMLを扱うときにはオブジェクトに変換しないといけない。)
DOMでは対象となる各要素(bodyタグなど)を抽出し、それを階層構造として扱う。
"文章を扱うための手法"...どういうこと??
■ DOMとは、"文章を扱うための手法" とかいたがどういうことか。
(文章？...文章？ 私は最初納得できなかった。笑)
"HTMLをJavaScriptから参照、更新する"という言い方も書いたが、
そもそもHTML(hypertext markup language)は...
= ウェブサイトのコンテンツの構造を作るために使うマークアップ言語。
= "HTML文章"とも呼ばれる。
=> 文章 ＝ 英語ではDocument
HTML上では、タグ(文章)の形で構成が表現されているが、
JavaScriptでは、DOMというオブジェクトの形でHTMLを表現する。
だから、
"HTML文章を、(JavaScript上で)扱う、変換する"必要があり、
その変換されたものがDOM(Document Object Model というオブジェクト)なわけだ！
(私はこれで納得いったがどうだろう。もう少し整理できそう。誰かあれば教えてください。)
■ DOM ツリー
上記で、階層構造として扱うと記述したが、この階層構造のことをDOMツリーという。
どのようになっているか
HTML構文を参考にしてDOMツリーを作成します。
そうしてこのDOMツリーがJAVASCRIPTエンジン上に保持されるようになる。
■ このDOMツリーを構成する要素を"ノード(Node)"という。
よって、DOMツリーはノードの集合で構成されているとも言える。
2.Style: Render Tree ~要素にスタイルを適用~
この工程で
上記に書いた通りに、Pasingして作成したDOM TreeとStyle Rulesの紐づけが行われる。
"どの要素にどのスタイルが適用されるのか"が明確になる。
Render-tree Construction, Layout, and Paint
3.Layout： RenderTreeを基にレイアウト ~要素の位置と大きさの計算~
この工程は、Layoutともいうが、Reflow（リフロー）と呼ばれる。
Render Treeにより、どの要素にどのスタイルが適用されるのか"
今度は、それぞれの要素(ノード)の位置と大きさの計算を行う。
Layoutに関わる要素:
height, width, padding, margin, top,
right, left, bottom, box-shadow etc...
Reander Treeの段階では、ノードの正確な位置とサイズは計算していない。
よってここでは、レンダーツリーの構築、位置、サイズの計算をキャプチャする。
ここまでで、Parse > Style > Layoutの工程を経て、
要素を出力する位置や大きさ、色まで、把握した。
それぞれの要素(ノード)の位置と大きさの計算ができると、
最終的にLayout Tree（画面に表示する対象のものだけを含むもの）が作成される。
4. Paint（ペイント）: Paint Records ~要素の重なりを考慮,作成~
レイアウトが完了すると、
ブラウザは"ペイントセットアップイベント"と"ペイントイベント"を発行し、
レンダーツリーを画面上のピクセルに変換する。
最終的に作成されたLayer TreeとPaint Recordsは、
Compositor Thread(コンポジタースレッド)に渡され、Main Threadは開放される！！！
５. Composite（コンポジット): ~レイヤーの合成とラスタライズ~
Composite（コンポジット)とは、ページをいくつかの層 (レイヤー) に分けて、
ピクセルを塗りつぶす作業を別々に行って、最終的に1つのページとして組み合わせる手法のこと。
Compositeに関わる要素: transform, opacity
■ 参考
■ Youtube：
https://www.youtube.com/watch?v=I6rEfvP4wUw&t=373s
■ Youtube：【JS】 DOMとは？ HTMLとの関係
https://youtu.be/ZWrXJc2QS6w
■ Udemy
【JS】ガチで学びたい人のためのJavaScriptメカニズム
おまけ
私は毎週、TamaStudyのみんなと学習を一緒に行っています。
その方々もまとめていて、みんなわかりやすくて勉強になります。ぜひ見てみてください！✨
Discussion