誰のための記事か？

Webフロントエンドの学習を始めたが
ブラウザの仕組みを学んだことがなく
障害切り分けに役立つ知識を3分くらいで得たい人向けの記事です。

ブラウザの構成要素6つ

出典: web.dev

*補足：レンダリングエンジンについて
狭義ではブラウザエンジンの一部がレンダリング(描画)エンジンです。
広義では同じものとして扱われることもあるため、ここでは「ブラウザエンジン」として扱います。

ブラウザのUIを構成する要素、

意外にもUIに関する標準化などは存在しないため、
慣習などによって現代のブラウザのUIは作られています。

そのため特定ブラウザには存在する機能やボタンが、
別のブラウザでは存在しないということも考えられるため、
ブラウザごと に違いがあることは覚えておくとよいでしょう。

といった仮説を立てることができます。

続いて、ブラウザエンジンの違いを見ていきましょう。

HTMLとCSSを解析し、表示するための機能などを含む要素です。
各ブラウザにおいて最も大きな違いはここにあると言えるでしょう。

などが考えられるでしょう、
次に、ネットワーク関係の違いを見ていきます。

HTTPリクエストなどを行うネットワーク関連の構成要素です。
使用するプロトコルは同じですが、実装方法は ブラウザごと に異なります

などの仮説を立てられます。
続いて、UIバックエンドを見ていきます。

基本的なUI(テキストなど)を構成する要素、描画は OS によって異なります。

といった仮説を立てられます。

次にJavaScriptエンジンについて見ていきましょう。

JavaScriptのコードを実行するための要素です。
ブラウザごとにエンジンの違いがあります。

などの仮説を立てることができるでしょう。

キャッシュやCookieなどを保存する役割を持つ要素です。

といった仮説を立てることができます。

　
以上、障害発生時の早期解決につながれば幸いです。