Chrome 架構

                              單進程 VS 多進程架構 (Process)

單進程 (Process)

早期單進程 browser 是指 browser所有功能模組 (網路，plugins，render engine等) 都跑同一個進程裡。

單進程出現的問題：

• 不穩定
  • 早期需要借用一些輔助插件來能實現功能。但如果插件突然 crash 會影響整個 browser
• 不流暢
  • JS 和 插件都是跑在同一個線程，同一個時刻只能跑一個
• 不安全
  • 插件可以用 c/c++ 來寫，通過插件來獲取 OS 任意資源 (權限，病毒，密碼等)

目前多進程架構 (Process)

來源

一個 browser 主進程，一個網路進程(從browser進程獨立出來)，一個GPU進程(從browser進程獨立出來)，多個插件進程和多個渲染進程。

• browser 主進程 - 主要負責介面的顯示，用戶交互，子進程管理，同時提供存儲功能。
• 網路進程 - 主要負責頁面網路資源下載。之前是作為一個模組在 browser 進程裡面，最近才獨立出進程。
• GPU 進程 - 主要是負責 UI 實現 3D 的繪製。
• 插件進程 - 主要負責插件的運行。擔心插件 crash 會影響 browser 和頁面，所以才把它獨立出進程。
• 渲染進程 - 主要負責處理頁面如 html/css/js。排版 engine (blink)，JS v8 engine 都在這個進程跑。
• 更多子進程 (不多介紹)

多進程 browser 架構：

• 優點：
  • 穩定性
  • 安全性
  • 流暢性
• 缺點：
  • 耗系統資源，需要更多空間
  • 複雜架構 (不夠彈性，難適應新的需求等)

總結：

輸入URL後發生什麼事

HTTP

Network

回顧：

1. browser address bar 輸入網址
2. DNS 域名解析 (google.com -> 192.xxx.xxx) ，找出對應 server IP 地址 (由DNS server 來處理)
3. 發起 TCP 連接，http 請求，發送請求
4. server response resources
5. Browser 下載 resources (html,css,js,images,file等)
6. Browser 會進行解析文件
7. 最後渲染成頁面

Render 階段 :

經過 browser 會顯示漂亮頁面，是如何做到？

科普知識點：

HTML：人模型 (裸體)

CSS：為這人添加服裝，打扮/化妝等

JavaScript：為這人添加一些行為讓他可以動起來，如和其他人打交道或和真人類沒區別。

如何構建DOM

如何生成CSSOM

渲染流程：

渲染流程：

1. HTML 解析成 DOM

2. CSS 解析成 CSSOM，計算出 DOM 節點具體樣式

3. 創建 佈局樹 (Layout Trees)

4. 分層 (Layer)

5. 繪製 (Paints)

6. 光栅 (Raster)

7. 合成 (Draw Quad)

render engine 機制相對來說比較複雜，大致分為幾個階段

備註：以上是 Chrome 渲染流程，其他 browser，會不一樣結構。

構建 DOM

HTML 文件經過解析成 DOM

1. 為什麼需要轉換為 DOM ？

是因為 browser 沒辦法理解 html

2. DOM 是什麼 ？

DOM 是 Document Object Model

文檔物件模型

構建 DOM 過程

DOM 過程

構建 CSS

CSS 文件經過解析成 CSSOM (StyleSheets)

1. 為什麼需要轉換為 DOM ？

是因為 browser 沒辦法理解 CSS，

也是和 html一樣，會執行轉換動作。

CSS 計算

Style Calculations

樣式計算目的是為了計算出 DOM 節點每個元素具體樣式。

大概分為三步完成:

• 把 CSS 轉換為 browser 能够理解的結構 (render engine 收到 css 時會執行一個轉換操作，通過 document.stylesheets 查詢)
• 屬性值
• 計算出 DOM 樹中每個節點具體樣式

Layout Trees

佈局階段 (Layout)

現在我們有了 DOM 和 DOM 樹中元素樣式！

但是目前還不足於顯示頁面，

因為我們還不知 DOM 元素的幾何位置訊息。

佈局階段分為兩步：

1. 創建佈局樹

2. 佈局計算 (位置)

創建佈局樹 (Layout)

• 進行 loop DOM 樹中所有看得見的節點，并把這些節點加入佈局中。
• 不可見的節點，佈局將會忽略掉。
  • 如：設定元素 display:none;

過程：

佈局樹構造過程1

佈局樹構造過程2

佈局計算

有了一顆完美的佈局樹 (Layout Tree)，接下來就是計算出佈局樹節點幾何位置。

備註：至於佈局計算就不做解釋，因為牽涉到演算法部分太複雜。Chrome Team 會重構佈局程式為新一代：LayoutNG

剩下：

1. HTML 解析成 DOM

2. CSS 解析成 CSSOM，計算出 DOM 節點具體樣式

3. 創建 佈局樹 (Layout Trees)

4. 分層/圖層 (Layer)

5. 繪製 (Paints)

6. 光栅 (Raster)

7. 合成 (Draw Quad)

總結

顯示在頁面上流程，都是由 Render Engine 負責渲染內容在頁面上。

1. RE 將 HTML 內容轉換為 browser 能讀懂結構 - DOM Tree
2. RE 將 CSS 樣式轉換為 browser 可以理解 stylesheets 和計算出 DOM 節點的樣式。
3. 然後創建 LayoutTree，并計算元素的佈局的訊息 (可見元素，計算元素位置)。
4. 最後根據 LayoutTree 繪製 (paint)，將內容顯示在頁面上。

Layer 圖層

Subtitle

Paints 繪製

Subtitle

Raster 柵格化

Subtitle