誰のための記事か？
Webフロントエンドの学習を始めたが
ブラウザの仕組みを学んだことがなく
障害切り分けに役立つ知識を3分くらいで得たい人向けの記事です。
ブラウザの構成要素6つ
出典: web.dev
*補足：レンダリングエンジンについて
狭義ではブラウザエンジンの一部がレンダリング(描画)エンジンです。
広義では同じものとして扱われることもあるため、ここでは「ブラウザエンジン」として扱います。
1.UI（ユーザーインターフェース）
ブラウザのUIを構成する要素、
意外にもUIに関する標準化などは存在しないため、
慣習などによって現代のブラウザのUIは作られています。
そのため特定ブラウザには存在する機能やボタンが、
別のブラウザでは存在しないということも考えられるため、
ブラウザごと に違いがあることは覚えておくとよいでしょう。
[起こりうる障害]
- PC変更時、昔はあったボタンがなくなった
- Webの特定機能が使えなくなった
⇒ Webアプリではなくブラウザが変わった？
⇒ 珍しいブラウザを使用している？
といった仮説を立てることができます。
続いて、ブラウザエンジンの違いを見ていきましょう。
2.ブラウザエンジン（レンダリングエンジン,HTMLレンダリングエンジン)
HTMLとCSSを解析し、表示するための機能などを含む要素です。
各ブラウザにおいて最も大きな違いはここにあると言えるでしょう。
著名なブラウザにおけるエンジンの違い
[ブラウザエンジン(ブラウザ名)]
- Blink（Google Chrome, Microsoft Edge, Opera）
- WebKit（Google Chrome*IOS ,Safari）
- Gecko（Firefox）
[起こりうる障害]
- EdgeとOperaでは正常なのにFirefoxだけ表示がおかしい
- Operaでは描画が正常だが、Safariの端末ではUIが崩れる など
⇒ レンダリングエンジンの違い？
などが考えられるでしょう、
次に、ネットワーク関係の違いを見ていきます。
3.ネットワーク接続機能
HTTPリクエストなどを行うネットワーク関連の構成要素です。
使用するプロトコルは同じですが、実装方法は ブラウザごと に異なります
[起こりうる障害]
- なぜか特定端末だけネットワーク周りが正常に動作しない
- ほとんどの端末は正常なのに一部だけ動作しない端末がある など
⇒ ネットワーク実装の違い？
などの仮説を立てられます。
続いて、UIバックエンドを見ていきます。
4.UIバックエンド
基本的なUI(テキストなど)を構成する要素、描画は OS によって異なります。
[起こりうる障害]
- なぜか特定OSのユーザーだけフォントがはみ出る
- ブラウザは一緒なのに、端末を変更したら文字が読みにくくなった
⇒ OSによる違い？
といった仮説を立てられます。
次にJavaScriptエンジンについて見ていきましょう。
5.JavaScriptエンジン
JavaScriptのコードを実行するための要素です。
ブラウザごとにエンジンの違いがあります。
著名なブラウザにおけるJavaScriptエンジンの違い
[JavaScriptエンジン名(ブラウザ名)]
- V8 (Google Chrome, Microsoft Edge)
- SpiderMonkey(Firefox)
- JavaScriptCore (Google Chrome*IOS, Safari)
[起こりうる障害]
- なぜか特定のブラウザだけページ表示が遅い
- とある関数が特定ブラウザでは動作しない
⇒ JavaScriptエンジンによる違い？
などの仮説を立てることができるでしょう。
6.データストレージ
キャッシュやCookieなどを保存する役割を持つ要素です。
[起こりうる障害]
- 古い情報が表示される
- たまに挙動が消える
⇒ キャッシュやCookie？
といった仮説を立てることができます。
以上、障害発生時の早期解決につながれば幸いです。