Internet ”Browsers and how they work?”
ブラウザとは?
同期的(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