普段はwebアプリ開発をしていますが、
ブラウザ内部で実装したコード達がどのように動いているのかなんとなくでしかわかっていなかったので、
ちょっと調べてみた系の記事です。

ブラウザの全体的な構造

この図の四角がブラウザのコンポーネントというらしいです。

コンポーネントの役割

1. User Interface

• アドレスバーや、進む、戻る、リロードボタンやお気に入りなど、 chromeを開いたときに目に見えるもの全部

2. Browser Engine

• UIとレンダリングエンジンの中間にいて、2つの間でのアクションをそれぞれにわかりやすく変換する役割
• UIから入力を受け取り、それを元にレンダリングエンジンへ命令を渡す

3. Rendering Engine

• 2からの命令に従ってブラウザ画面にちゃんと表示できるように働く場所
• 全てのコンポーネントで ここが一番負荷がかかっていて大事な部分
• HTMLがリクエストされた場合は、ここでHTML, CSSを解析してパパッと画面に出せるように頑張る

• なので、このコンポーネントが解析しやすいコードにしないとパフォーマンスが落ちるということ

• 代表的なレンダリングエンジン
  • Blink(Chrome, Edge, Operaなどで使用)
  • Webkit(Safariで使用)
  • Gecko(Firefoxで使用)

4. Networking

• リクエスト…ブラウザがHTTPやHTTPSリクエストを送信して、HTML, CSS, Javascript, 画像などを取得する
• レスポンス…受け取ったレスポンスをレンダリングエンジンや、ブラウザエンジンに渡したりする

5. Javascript Interpreter

• JSコードを解析して実行するために使用される
• 代表的なJSエンジン
  • V8(Chrome, Edge)
  • JavascriptCore(Safari)
  • SpiderMonkey(Firefox)

6. UI Backend

• UIで操作した(クリックなど)ことを裏側で行うために使用

7. Data Persistence

• Cookie, LocalStorage, SessionStorage, IndexedDB, WebSQL, FileSystemなどデータ永続性のために使用

レンダリングエンジンについてもう少し詳しく

Webアプリ開発において、このコンポーネントからレンダリングエンジンについて考慮する必要がかなりある。

ブラウザの仕組み  |  Articles  |  web.dev

web.dev

レンダリングエンジンは、各タブごとにそれぞれのプロセスで実行される。

レンダリングエンジンの内部処理の流れ

1. HTMLを解析してDOMツリーを構築

• HTMLを受け取り、画面を構成するためDOMツリーを構築する

DOM ツリー

undefined

• CSSを適用 1で構築したDOMツリーに対し、外部ファイルやスタイルタグのCSSを解析する。 この解析結果は、CSSOM(CSS Object Model)というツリーにまとめられる

2. レンダーツリーを構築 1でできたDOMツリー、CSSOMを組み合わせレンダーツリーが作成されます。 ここでは、レンダリング対象の要素のみ入っている。 そのため、画面を構成しない下記のものはこちらには入っていない

• meta情報
• display: none など

3. レンダーツリーをレイアウト

• 2のレンダーツリーを元に、位置・サイズを計算し正確なCSS情報を計算
• そして、正確なCSSをHTMLに当てていく。 ex. z-indexの重ね順などが整理されていく

4. レンダーツリーをペイント

• 6番のコンポーネントにあったUI Backendを使用して各ノードを画面上にペイントしていく。
• 重ね順に従って、背景から前面へと描画されていく。

2〜4は全て終わってから描画されるのではなく、できたものからどんどん描画を進めていく。

レンダリングエンジンが解析しやすい書き方

ChatGPTにちょっと聞いてみました。

• 適切なHTML

  • ほとんどdivで囲むのではなく、ヘッダーなら headerタグ, フッターなら footerタグ, など役割にあったタグをちゃんと使用する
  • 深い階層にしない
  index.html

            
  <div>
    <ul>
      <li>
        <a href="https://google.com"> googleへ </a>
      </li>
    </ul>
  </div>
  
          

  このコードより、

  index.html

            
  <li>
    <a href="https://google.com"> googleへ </a>
  </li>
  
          

  このように短いネストの方が解析しやすいらしい

  • 非推奨タグは使用しない

• CSSを分離

  • HTMLに直書きするのではなくちゃんと別ファイルに分離する

• 効率的なJavascript

  • 不要なJavascriptは読み込まないようにして実行されないようにする

• キャッシュコントロール

  • 適切なキャッシュコントロールヘッダーを設定する

• レスポンシブ

  • メディアクエリを使用しレスポンシブデザインを書いておく

まとめ

簡単に書いてみましたので、本当はもっといろいろなことが内部で行われて画面が見えるようになっております。
URLを叩いてすぐ画面が出てくるのに、裏側で色々なことが一瞬でやってると思うとすごいなーという感じですね！

引用

ブラウザの仕組み  |  Articles  |  web.dev

web.dev

The components of a browser

DEV Community