瀏覽器運作原理 速記

先附上文件

译 现代浏览器内部揭秘（第一部分）
Inside look at modern web browser (part 1)  |  Web  |  Google Developers

為了瞭解瀏覽器怎麼運作，首先我們必須先瞭解電腦是怎麼運作的

電腦核心是由 CPU 和 GPU 組成

• CPU：電腦的大腦，辦公室的員工，每個人處理各自的任務，我們常聽到的四核心、八核心就是 CPU
• GPU：處理平行運算，針對特定運算加速（繪圖、平行運算），應用於繪圖相關、挖礦
  硬體（CPU、GPU） -> 作業系統 -> 應用程式

名詞介紹

Process & Thread

Process 程序（中國稱進程）
Thread 執行緒（中國稱線程）

• 一個 Process 下有多個 Thread。

IPC

IPC（Inter Process Communication）指不同 Process 之間溝通

一窺瀏覽器的世界

Browser 裡有各種 Process
（ex. Browser Process、GPU Process、Render Process、Plugin Process）

在 Chrome 裡面每開一個 tab 都是一個 Process (tab 就是瀏覽器上方的分頁)

• 優點：不互相影響，關掉那個 tab 就好
• 缺點：較耗效能

HTML 裡的 iframe 標籤也是一個 Process

流程跑起來

/當我們在 Google search input 放入字串時/

1. UI thread 會判斷這是我們要搜尋的內容還是URL
2. 判斷完畢後 UI thread 將結果丟給 Network thread
3. Network thread 開始解析 DNS、建立 connection /request/
4. OK 後跟 UI thread 說 OK /response/
5. UI thread 找到 Renderer process 跟他說可以渲染畫面
6. Renderer process 渲染畫面

/換頁（tab）時/

1. Browser process 跟 Renderer process 溝通
2. Renderer process 裡的 Main thread 就會來做渲染畫面的工作
3. Main thread 渲染完畫面會丟一個 page loaded 事件給 Browser process UI thread
4. 此時 UI thread 就知道網頁處理完可以觸發 onload 事件等等

Renderer process

Renderer process 負責處理 DOM，DOM 是瀏覽器內部對於網頁的一個表示方法、一個資料結構

Renderer process 內有

• Main thread
• Worker threads 雜事
• Compositor thread 合成
• Raster thread 光柵