整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前言
起因是這樣，有運營小姐姐跟我反饋某個頁面卡頓的厲害。心中突然一想，媽耶不會有bug吧，心慌慌的。然后自己打開頁面，不卡呀，流暢的一xx，肯定是她弄錯了。帶著去教她如何正確的使用電腦的想法我自信的下了樓，然后自信的在她電腦上打開了頁面，我滑，我滑，我再滑。woc，頁面咋不動啊，woc，電腦都卡死了。？？？什么情況，然后有其他運營反饋 air 上并不卡頓。頁面下滑為何卡頓？在mbp和mba上的表現為何不同？這一切的問題究竟是從何而起？請老板們帶著這兩個問題往下看，我將一步一步揭開瀏覽器渲染的面紗。
先上張圖讓大家感受一下被支配的恐懼。注意，那個 GPU 進程內存空間占用 10.9 GB。
mbp上知識儲備
要搞懂我下面說的，首先你需要先知道現代瀏覽器的架構以及顯卡、GPU 和屏幕分辨率的關系。當然了，就算這些不了解，也是可以接著往下看的，我會簡單的講一下，嘻嘻嘻。
現代瀏覽器的架構
因為這里并沒有什么規范，各大瀏覽器廠商的各自的架構設計也并不相同(不過都是大同小異)，我就以 chrome 瀏覽器為例說一下 chrome 的設計。
chrome 瀏覽器從最初的單進程發展到現在的多進程架構。我們可以從上面我發的圖看到瀏覽器包括：一個瀏覽器進程、一個 GPU 進程、一個網絡進程、多個渲染進程和多個插件進程。
渲染進程
了解了上面的瀏覽器的架構，下面我們說說今天的主角渲染進程，關于瀏覽器多進程之間是如何配合最后在屏幕上展示內容的，這個后面會寫文章記錄。現在我們說說渲染進程的事兒。
渲染流水線
按照渲染的時間順序可以分成以下幾個子階段：構建 DOM 樹、樣式計算、布局、分層、繪制、分塊、光柵化、合成。東西有點多，為了快速記憶和理解，需要重點關注每個子階段的輸入和輸出以及做了哪些處理。
還需要了解渲染進程中的幾個線程。包括主線程（main thread）、工作線程（work thread）、合成線程（ thread）以及光柵化線程（raster thread）。后面會總結這些線程的具體功能，我們先看一下整體的渲染流程。
構建 DOM 樹
構建 DOM 樹
DOM 樹是什么相信大家都知道，我就不多 BB 了。因為瀏覽器無法直接理解和使用 html 文件，所以需要將 html 文件轉為瀏覽器能夠理解的結構 DOM 樹。
網頁中常常包含圖片、css、js 等資源文件，這些資源瀏覽器會去各種渠道獲取（緩存、網絡下載等）。在構建 DOM 樹的時候主線程會去請求他們，相關資源會通過進程之間的通信（IPC）通知網絡進程去下載這些資源。在遇到
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
