• 浏覽器會把HTML解析成DOM
• 把CSS解析成CSSOM，
• DOM和CSSOM合并就産生了Render Tree，這一過程稱為 Attachment；
• 生成布局(flow)，浏覽器在屏幕上“畫”出渲染樹中的所有節點；
• 将布局繪制(paint)在屏幕上，顯示出整個頁面。

流程圖

定義：當Render Tree中部分或全部元素的尺寸、結構、或某些屬性發生改變時，浏覽器重新渲染部分或全部文檔的過程稱為回流（重排）。

• 頁面初始渲染，這是開銷最大的一次重排
• 添加/删除可見的DOM元素
• 改變元素位置
• 改變元素尺寸，比如邊距、填充、邊框、寬度和高度等
• 改變元素内容，比如文字數量，圖片大小等
• 改變元素字體大小
• 改變浏覽器窗口尺寸，比如resize事件發生時
• 激活CSS僞類（例如：:hover）
• 設置 style 屬性的值，因為通過設置style屬性改變結點樣式的話，每一次設置都會觸發一次reflow
• 查詢某些屬性或調用某些計算方法：offsetWidth、offsetHeight等，除此之外，當我們調用 getComputedStyle方法，或者IE裡的 currentStyle 時，也會觸發重排，原理是一樣的，都為求一個“即時性”和“準确性”。

• clientWidth、clientHeight、clientTop、clientLeft
• offsetWidth、offsetHeight、offsetTop、offsetLeft
• scrollWidth、scrollHeight、scrollTop、scrollLeft
• scrollIntoView()、scrollIntoViewIfNeeded()
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

定義：當頁面中元素樣式的改變并不影響它在文檔流中的位置時（例如：color、background-color、visibility等），浏覽器會将新樣式賦予給元素并重新繪制它，這個過程稱為重繪。

• 避免使用table布局。
• 盡可能在DOM樹的最末端改變class。
• 避免設置多層内聯樣式。
• 将動畫效果應用到position屬性為absolute或fixed的元素上。
• 避免使用CSS表達式（例如：calc()）。
• 避免頻繁操作樣式，最好一次性重寫style屬性，或者将樣式列表定義為class并一次性更改class屬性。
• 避免頻繁操作DOM，創建一個documentFragment，在它上面應用所有DOM操作，最後再把它添加到文檔中。
• 也可以先為元素設置display: none，操作結束後再把它顯示出來。因為在display屬性為none的元素上進行的DOM操作不會引發回流和重繪。
• 避免頻繁讀取會引發回流/重繪的屬性，如果确實需要多次使用，就用一個變量緩存起來。
• 對具有複雜動畫的元素使用絕對定位，使它脫離文檔流，否則會引起父元素及後續元素頻繁回流。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!