前言

起因是這樣，有運(yùn)營小姐姐跟我反饋某個頁面卡頓的厲害。心中突然一想，媽耶不會有bug吧，心慌慌的。然后自己打開頁面，不卡呀，流暢的一xx，肯定是她弄錯了。帶著去教她如何正確的使用電腦的想法我自信的下了樓，然后自信的在她電腦上打開了頁面，我滑，我滑，我再滑。woc，頁面咋不動啊，woc，電腦都卡死了。？？？什么情況，然后有其他運(yùn)營反饋 air 上并不卡頓。頁面下滑為何卡頓？在mbp和mba上的表現(xiàn)為何不同？這一切的問題究竟是從何而起？請老板們帶著這兩個問題往下看，我將一步一步揭開瀏覽器渲染的面紗。

先上張圖讓大家感受一下被支配的恐懼。注意，那個 GPU 進(jìn)程內(nèi)存空間占用 10.9 GB。

mbp上知識儲備

要搞懂我下面說的，首先你需要先知道現(xiàn)代瀏覽器的架構(gòu)以及顯卡、GPU 和屏幕分辨率的關(guān)系。當(dāng)然了，就算這些不了解，也是可以接著往下看的，我會簡單的講一下，嘻嘻嘻。

現(xiàn)代瀏覽器的架構(gòu)

因為這里并沒有什么規(guī)范，各大瀏覽器廠商的各自的架構(gòu)設(shè)計也并不相同(不過都是大同小異)，我就以 chrome 瀏覽器為例說一下 chrome 的設(shè)計。

chrome 瀏覽器從最初的單進(jìn)程發(fā)展到現(xiàn)在的多進(jìn)程架構(gòu)。我們可以從上面我發(fā)的圖看到瀏覽器包括：一個瀏覽器進(jìn)程、一個 GPU 進(jìn)程、一個網(wǎng)絡(luò)進(jìn)程、多個渲染進(jìn)程和多個插件進(jìn)程。

渲染進(jìn)程

了解了上面的瀏覽器的架構(gòu)，下面我們說說今天的主角渲染進(jìn)程，關(guān)于瀏覽器多進(jìn)程之間是如何配合最后在屏幕上展示內(nèi)容的，這個后面會寫文章記錄。現(xiàn)在我們說說渲染進(jìn)程的事兒。

渲染流水線

按照渲染的時間順序可以分成以下幾個子階段：構(gòu)建 DOM 樹、樣式計算、布局、分層、繪制、分塊、光柵化、合成。東西有點多，為了快速記憶和理解，需要重點關(guān)注每個子階段的輸入和輸出以及做了哪些處理。

還需要了解渲染進(jìn)程中的幾個線程。包括主線程（main thread）、工作線程（work thread）、合成線程（ thread）以及光柵化線程（raster thread）。后面會總結(jié)這些線程的具體功能，我們先看一下整體的渲染流程。

構(gòu)建 DOM 樹

構(gòu)建 DOM 樹

DOM 樹是什么相信大家都知道，我就不多 BB 了。因為瀏覽器無法直接理解和使用 html 文件，所以需要將 html 文件轉(zhuǎn)為瀏覽器能夠理解的結(jié)構(gòu) DOM 樹。

網(wǎng)頁中常常包含圖片、css、js 等資源文件，這些資源瀏覽器會去各種渠道獲取（緩存、網(wǎng)絡(luò)下載等）。在構(gòu)建 DOM 樹的時候主線程會去請求他們，相關(guān)資源會通過進(jìn)程之間的通信（IPC）通知網(wǎng)絡(luò)進(jìn)程去下載這些資源。在遇到