🐶

Internet ”Browsers and how they work?”

2023/06/26に公開

ブラウザとは?

同期的(HTML+CSS)でJavascriptを解析してそのまま画面に見せてくれるソフトウェアです。

※同期的とは?

Synchronousとは色々な作業を同時に起きることではなく、一つ作業することです。反対語で非同期があります。

ブラウザが同期的な理由は?

DOM treeが完成させる前、scriptがDOMを操作するとエラーが発生するし、画面には優先的にHTMLで構成されているレイアウト画面がレンダリングされ、その次scriptを読んでuserと相互作用する順序で行われるからです。

※DOM treeとは?

DOM(Document Object Model)はHTML、XML文書のプログラミング interfaceで、
基本的にHTMLの構造に従い、これをTree形式で表現します。
![](https://storage.googleapis.com/zenn-user-upload/83a8922d347a-20230626.png =350px)

ブラウザの基本構造

①user interface(UI)

userがアクセス可能なエリア。ブラウザを開いたら基本的に見えるアドレス入力ウィンドウ、ブックマークメニュー、更新/ホームボタンなど含めています。


②browser engine

user interfaceとレンダリングエンジン間の動作をコントロール。Data Storageを参照し、ローカルにデータを読み書きしながら様々なタスクを実行します。

※Data Storageとは?

アプリケーション、ネットワークプロトコル、文書、メディア、アドレス、ユーザーのデフォルト設定などを構成する細かいデータのディジタル情報を実際に収集して保管する場所です。


③rendering engine

WEBサーバーからresponseもらったリソースをウェブブラウザに表示する役割。HTML文書responseもらったら、HTMLとCSSをパーツクラブして画面に表示させてくれます。
★ここの理解大事!!

④networking

HTTP要求などのサーバーとの通信を可能にするネットワーク呼び出しに使用します。

⑤UI backend

select、inputなど基本的なウィジェットを表示するインターフェース。

⑥Javascript interpreter

Javascriptコードを解析して実行する。

⑦DataPersistence

Cookie, Local Storageなどブラウザメモリーを活用して保存できるエリア。

Discussion