在網上發現了一篇很好的博客文章，對瀏覽器進程線程、Web Workers、Event Loop 等都解釋得通俗易懂。在此，我根據其內容做了幾張思維導圖，對照着文章看可加深理解。
博客地址是： http://www.dailichun.com/2018...
目錄
1、區分進程和線程
在系統的任務管理器中可以查看當前正在運行的各種進程。
2、瀏覽器是多進程的
打開 chrome 的任務管理器，可以看到當前瀏覽器裏的進程。在這裏瀏覽器應該也有自己的優化機制，有時候打開多個tab頁後，可以在Chrome任務管理器中看到，有些進程被合併了，如下圖：
3、重點是瀏覽器內核（渲染進程）
請牢記，瀏覽器的渲染進程是多線程的
4、Browser進程和瀏覽器內核（Renderer進程）的通信過程（文章原圖）
- Browser進程收到用戶請求，首先需要獲取頁面內容（譬如通過網絡下載資源），隨後將該任務通過RendererHost接口傳遞給Render進程
- Renderer進程的Renderer接口收到消息，簡單解釋後，交給渲染線程，然後開始渲染
- 渲染線程接收請求，加載網頁並渲染網頁，這其中可能需要Browser進程獲取資源和需要GPU進程來幫助渲染，當然可能會有JS線程操作DOM（這樣可能會造成迴流並重繪）
- 最後Render進程將結果傳遞給Browser進程
- Browser進程接收到結果並將結果繪製出來
5、WebWorker與SharedWorker
本質上就是進程和線程的區別。SharedWorker由獨立的進程管理，WebWorker只是屬於render進程下的一個線程
6、瀏覽器渲染流程（文章原圖）
- 解析html建立dom樹
- 解析css構建render樹（將CSS代碼解析成樹形的數據結構，然後結合DOM合併成render樹）
- 佈局render樹（Layout/reflow），負責各元素尺寸、位置的計算
- 繪製render樹（paint），繪製頁面像素信息
- 瀏覽器會將各層的信息發送給GPU，GPU會將各層合成（composite），顯示在屏幕上。
7、Event Loop（結合 ES6 的 microtask 與 macrotask）
簡單版：
複雜版：
