How browsers work 讀後感－About Time

在還是 Web 新手時，一點也都不瞭解 Browser 是如何運作的？也沒在管，只覺得反正就是 IDE 開一個新的 Web 專案，就會把一些初始的 Structure 都給搞定了，例如：DTD，Basic HTML Template 等等。然後就會很容易的做出 Performance 不好的 Web。到了現在我還是對 Browser 有一些模糊的地方，但在看完 How browsers work 一文後，清楚許多。

一. Browser 的基本架構

( 來源: How browsers work 一文 )

1. User Interface:

此處指的是不包含顯示 Request page 的 Main window，其他都屬於 Browser 的 UI，例如：網址列，書籤列等等。

2. Browser Engine:

提供一個介面來詢問或操控 Rendering Engine。

3. Rendering Engine:

主要負責顯示使用者 Request 的網頁，將 Parsing 後的內容顯示出來。

4. Networking:

負責大家所熟悉的 HTTP Request 。

5. JavaScript Interpreter:

負責 Parsing 和執行 JavaScript code。

6. UI Backend:

負責提供網頁上一些基本元素的樣式，例如：ComboBox, Button 等。此樣式會依據 OS 的不同而有差異。

7. Data Stroage:

提供 Client 端資料儲存的地方，例如: Cookie, Localstroage 等。

二. 大部分解 Rendering Engine

( 來源: How browsers work 一文 )

上圖就是 Rendering Engine 的基本流程，第一步一定是要將 HTML 轉成 DOM Tree，之後再配合一些 Style information 例如: CSS，轉成 Render Tree，再來就是開始做 Layout 的動作，最後開始畫出畫面來。當然現在的 Browser 為了速度上的考量，想要盡可能的讓使用者看到畫面，所以通常都不會等到整個 Page 都準備好後才顯示出畫面，Rendering Engine 會以一部分一部分的方式來 Parse 和 Display。

三. 重要觀念

1. 我們時常會以 JavaScript 去動態更動 Style，或做一些動畫的效果，若能做到部分的更動，而非整個 Render Tree 都要更動，效能會比較好。

2. Rendering Engine 的 Thread 是 Single Thread，所以大部分的 Operation 都是在 Single Thread 下做處理的，但是 Network 的 Operation 例外，Network Operation 可以同時有多個 Thread 來進行，所以可以很常看到 Browser 在同時間發出一些 Request。

3. Box Model 的概念很重要

( 來源: How browsers work 一文 )

4. Position Scheme

原文說得很清楚

There are three schemes:

Normal - the object is positioned according to its place in the document - this means its place in the render tree is like its place in the dom tree and layed out according to its box type and dimensions
Float - the object is first layed out like normal flow, then moved as far left or right as possible
Absolute - the object is put in the render tree differently than its place in the DOM tree

The positioning scheme is set by the "position" property and the "float" attribute.