📝

Webブラウザってどうやって動いているの?

に公開

はじめに

Webブラウザって実際にどういう流れで動作しているのかわからなかったため後で見返すために記事にしておこうと思います。
以下を参考にさせていただきました。
https://github.com/tetz-akaneya/what-happens-when-JA
https://zenn.dev/0bookbook/articles/059dffeb4eeee3
 

ブラウザは一言で言うと何をやっているのか

Web上のリソースをサーバからリクエストしとってきて、ブラウザの画面に表示している
 

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

  • ユーザーインターフェース

ユーザーとアプリの接点。ボタンやタブなど画面上に見える部分。画面表示やリクエストにつながるユーザーによる操作等が行われる。

 

  • ブラウザエンジン

UIとレンダリングエンジン間の動きを制御するもの。UIから受け取ったデータをレンダリングエンジンに渡す。
 

  • レンダリングエンジン

レスポンスの内容を表示する役割。レスポンスがHTMLならレンダリングエンジンはHTMLとCSSをパース(データを解析し構造を変換するなどして必要なデータを取り出すこと)して、スクリーンに表示することになる。
 

  • ネットワーク

HTTPリクエストなどのネットワークへの呼び出しを、プラットフォーム間で共通のインターフェースを通じて行う。サーバーにリクエストを送る。
 

  • UIバックエンド

コンボボックスやウィンドウ等のブラウザの基本的なウィジェットを表示させる。
 

  • JavaScriptエンジン

JavaScriptのコードをパースして実行する。
 

  • DataStorage

記憶層にあたる。ブラウザはクッキーなどに様々なデータを保存でき、localStorage, IndexedDB, WebSQL, FileSystemなどの保存方法をサポートしている。

まとめ

以上によって画面での操作によってリクエストが送信され、サーバーから取得したリソースを画面上に表示している。

Discussion