一、帶着問題做看客
1、爲什麼說瀏覽器是多進程，有哪些進程呢？這些進程都是做什麼的？
2、爲什麼說瀏覽器內核是多線程，有哪些線程呢？這些線程都是做什麼的？
3、JS單線程是什麼呢？
4、JS運行機制是什麼呢？
二、進程和線程的區別
| 進程 | 線程 |
| 進程好比一個工廠，有獨立資源（系統分配的內存） | 線程好比工廠中的工人 |
| 工廠（進程）之間是相互獨立 | 多個工人（線程）可以合作完成任務 |
| 工廠（進程）內有一個或者多個工人（線程） | 工人（線程）之間共享空間、資源 |
注：
- 進程是cpu資源分配的最小單位（是能擁有資源和獨立運行的最小單位）
- 線程是cpu調度的最小單位（線程是建立在進程的基礎上的一次程序運行單位，一個進程中可以有多個線程）
三、瀏覽器多進程
基本準則：
- 瀏覽器是多進程的
- 瀏覽器之所以能夠運行，是因爲系統給它的進程分配了資源（cpu、內存）
- 簡單點理解，每打開一個Tab頁，就相當於創建了一個獨立的瀏覽器進程。
瀏覽器進程分類：
| 進程 | 描述 | 作用 |
| Browser進程 | 瀏覽器主進程，負責協調和主控 |
1、負責瀏覽器界面顯示，與用戶交互。如前進，後退等； 2、負責各個頁面的管理，創建和銷燬其他進程； 3、將Renderer進程得到的內存中的Bitmap（位圖），繪製到用戶界面上； 4、網絡資源的管理，下載等 |
| GPU進程 | 繪製3D等，只能有1個 | 圖形、視頻的渲染 |
| 瀏覽器渲染進程（Renderer進程） | 默認每個tab頁有1個進程，是多線程 |
1、頁面渲染， 2、腳本執行， 3、事件處理 |
四、瀏覽器渲染進程的多線程
| 線程名稱 | 作用 | 備註 |
| GUI渲染線程 | 負責渲染瀏覽器界面，解析HTML，CSS，構建DOM樹和RenderObject樹，佈局和繪製等 |
1、當界面需要重繪（Repaint）或由於某種操作引發迴流(reflow)時，該線程就會執行； 2、GUI渲染線程與JS引擎線程是互斥的，當GUI線程渲染時JS引擎線程會被掛起。 |
| JS引擎線程（JS內核） | 負責處理Javascript腳本程序，包括解析Javascript腳本，運行代碼 | GUI渲染線程與JS引擎線程是互斥的，當JS引擎執行時GUI線程會被掛起，GUI更新會被保存在一個隊列中等到JS引擎空閒時立即被執行。 |
| 定時觸發器線程 | setInterval與setTimeout所在線程， |
1、計時完畢後，添加到事件隊列中，等待JS引擎空閒後執行； 2、W3C在HTML標準中規定，規定要求setTimeout中低於4ms的時間間隔算爲4ms。 |
| 異步http請求線程 | 在XMLHttpRequest在連接後是通過瀏覽器新開一個線程請求 | 將檢測到XMLHttpRequest狀態變更時，如果設置有回調函數，異步線程就產生狀態變更事件，將這個回調再放入事件隊列中。再由JavaScript引擎執行。 |
| 事件觸發線程 | 負責控制事件循環，當對應的事件符合觸發條件被觸發時，該線程會把事件添加到待處理隊列的隊尾，等待JS引擎的處理。 |
當JS引擎執行代碼塊如setTimeOut時（也可來自瀏覽器內核的其他線程,如鼠標點擊、AJAX異步請求等），會將對應任務添加到事件線程中。這些待處理隊列中的事件都得排隊等待JS引擎空閒時處理。 |
五、瀏覽器進程之間通信過程（簡化後的）
1、Browser進程收到用戶請求，首先需要獲取頁面內容（如通過網絡下載資源），隨後將該任務通過RendererHost接口傳遞給Render進程；
2、Renderer進程的Renderer接口收到消息，簡單處理後，交給渲染線程開始渲染：
【1】渲染線程接收請求，加載網頁並渲染網頁，這其中可能需要Browser進程獲取資源和需要GPU進程來幫助渲染；
【2】可能會有js線程操作DOM；
【3】最後Render進程將結果傳給Browser進程；
3、Browser進程接收到結果並將結果（Renderer進程得到的內存中的Bitmap）繪製出來；