ブラウザの中の処理を覗いてみよう ~第1章 コンポーネント編~

こんにちは！

今回は「JS がどんな順序で読み込まれ、実行されていくのか」をまとめていきたいと思います。

最近、NextJS や SvelteKit に触れる機会が増えてきたので、CSR と SSR の区別をつけるためにも根本の理解は大事です。

そのためには、ブラウザ上で JS がどのように実行されているのかを把握する必要があると思います。

仕組みから理解していき、パフォーマンスを意識した開発ができるようになっていきましょう！

内容が多くなってしまうので、4 部構成にして解説していきたいと思います。

第１章：ブラウザのコンポーネントについて

第 2 章：ファイルの解析、レンダーツリーの構築について

第 3 章：イベントループについて

第 4 章：CSR、SSR などのレンダリング方式について

ここでは、詳しい処理を延々と解説するのではなくニュアンスの理解を助けるような内容となっていますので

• 「レンダリングの仕組みがよくわからねぇぜ」
• 「先輩や同僚が話してることが理解できん。。。」

って方の役に立つと思います。

ブラウザの役割

皆さんが調べ物をしたり、web 開発をする際に使用するブラウザ。

ブラウザの仕事は、インターネットを利用して情報を閲覧するためのツールです。

見たいものや調べたいことを検索（リクエスト）すれば、関連したサイトが表示（レスポンス）されたりするのは、容易に想像がつくと思います。

ブラウザのコンポーネント

そんなブラウザですが、実はいくつかの要素（コンポーネント）に分けることができます。

• UI
• ネットワーク
• JS エンジン
• レンダリングエンジン

一つずつ解説していきます。

ユーザーインターフェース（UI）

UI とは、私たちが実際に見ている画面を指します。

表示されているページ、ブラウザバックボタン、タブなども UI の一部です。

UI の役割としては

• 私たちが操作した内容通りにサーバーへリクエストを送信する
• 表示可能となった情報をユーザーへ表示する

主にこの二つとなります。

ネットワーク

ネットワークとは、サーバーと通信して渡されたリソースファイルをレンダリングエンジンに渡す処理をしてくれます。ここでは深く突っ込みません。

レンダリングエンジンについては次に紹介します。

レンダリングエンジン

レンダリングエンジンは、画面描画のための準備をしてくれるコンポーネントです。

具体的な役割としては

• サーバーから送られてきた HTML や CSS を解析して画面に表示する準備をしてくれる
• HTML や CSS を解析し DOM と CSSOM を生成、レンダーツリーを構築してくれる

DOM と CSSOM の生成などの詳しい流れは次章で解説します。

HTML 上にある script タグのコードや、JS ファイルが見つかった場合に JS エンジンへ処理を任せるという役割も担っています。

JS エンジンについては次に紹介します。

JS エンジン

JS エンジンの役割は以下の通りです。

• JS のコードを読み込んで（解析、コンパイル）実行できるようにする
• 読み込んだ JS コードを実行する

読み込みと実行が主な役割ですね。

（解析とコンパイルの詳しい処理は次章で解説します。）

以上がブラウザで使われているコンポーネントです。

大まかな関係図を置いておきます。

各ブラウザで使われているコンポーネント

ブラウザを構築していくコンポーネントについて紹介しましたが

実は JS エンジンとレンダリングエンジンについてはブラウザごとに違うエンジンを使っています。。。！

各エンジンの強みとかを調べてみるのも面白いかもしれませんね(^^)

主なブラウザのコンポーネントを軽くまとめておきます。

	レンダリングエンジン	JS エンジン
Chrome	Blink	V8
Microsoft Edge	Blink	V8
Safari	WebKit	JavaScriptCore
Firefox	Gecko	SpiderMonkey

（自分は V8 しか知りませんでした 💦）

以上がコンポーネントについて話でした。

次回はレンダリングエンジンでの DOM や CSSOM の生成、JS エンジンにて解析とコンパイルが行われ、レンダリングエンジンがどのように構築されていくのかを解説したいと思います。

最後まで読んでくれてありがとうございました。

一緒に勉強頑張っていきましょう(^^)