淺談JS重繪與回流

在說瀏覽器渲染頁面之前，我們需要先了解兩個點，一個叫 瀏覽器解析 URL，另一個就是本章節將涉及的 重繪與回流：

• 重繪(repaint)：當元素樣式的改變不影響布局時，瀏覽器將使用重繪對元素進行更新，此時由於只需要 UI 層面的重新像素繪制，因此損耗較少。

常見的重繪操作有：

1. 改變元素顏色
2. 改變元素背景色
3. more ……

• 回流(reflow)：又叫重排（layout）。當元素的尺寸、結構或者觸發某些屬性時，瀏覽器會重新渲染頁面，稱為回流。此時，瀏覽器需要重新經過計算，計算后還需要重新頁面布局，因此是較重的操作。

常見的回流操作有：

1. 頁面初次渲染
2. 瀏覽器窗口大小改變
3. 元素尺寸/位置/內容發生改變
4. 元素字體大小變化
5. 添加或者刪除可見的 DOM 元素
6. 激活 CSS 偽類（:hover……）
7. more ……

• 重點：回流必定會觸發重繪，重繪不一定會觸發回流。重繪的開銷較小，回流的代價較高。

看到這里，小伙伴們可能有點懵逼，你剛剛還跟我講着 防抖與節流 ，怎么一下子跳到 重繪與回流 了？

OK，賣個關子，先看下面場景：

• 界面上有個 div 框，用戶可以在 input 框中輸入 div 框的一些信息，例如寬、高等，輸入完畢立即改變屬性。但是，因為改變之后還要隨時存儲到數據庫中，所以需要調用接口。如果不加限制……

看到這里，小伙伴們可以將一些字眼結合起來了：為什么需要 節流，因為有些事情會造成瀏覽器的 回流，而 回流 會使瀏覽器開銷增大，所以我們通過 節流 來防止這種增大瀏覽器開銷的事情。

形象地用圖來說明：

 

 

這樣，我們就可以形象的將 防抖與節流 與 重繪與回流 結合起來記憶起來。

那么，在工作中我們要如何避免大量使用重繪與回流呢？：

1. 避免頻繁操作樣式，可匯總后統一一次修改
2. 盡量使用 class 進行樣式修改，而不是直接操作樣式
3. 減少 DOM 的操作，可使用字符串一次性插入

OK，至此我們就講完兩個部分了，那么問題又來了：“瀏覽器渲染過程中，是不是也有重繪與回流？”“從瀏覽器輸入 URL 到渲染成功的過程中，究竟發生了什么？”

我們，繼續深入探索……

 

 

 

 

 

.