渲染進程將 HTML 內容轉換為能夠讀懂的 DOM 樹結構。

渲染引擎將 CSS 樣式表轉化為瀏覽器可以理解的 styleSheets，計算出 DOM 節點的樣式。

創建布局樹，并計算元素的布局信息。對布局樹進行分層，并生成分層樹。

為每個圖層生成繪制列表，并將其提交到合成線程。合成線程將圖層分成圖塊，并在光柵化線程池中將圖塊轉換成位圖。

合成線程發送繪制圖塊命令 DrawQuad 給瀏覽器進程。瀏覽器進程根據 DrawQuad 消息生成頁面，并顯示到顯示器上。

減少重排重繪, 方法很多：
1. 使用 class 操作樣式，而不是頻繁操作 style
2. 避免使用 table 布局
3. 批量dom 操作，例如 createDocumentFragment，或者使用框架，例如 React
4. Debounce window resize 事件
5. 對 dom 屬性的讀寫要分離
6. will-change: transform 做優化