浏覽器重排重繪

什麼是重排、重繪

由于某個元素的布局幾何屬性發生了比變化而導緻了其他元素位置的變化，浏覽器就會使渲染樹中受到影響的部分失效，并重新構造新的渲染樹，這個過程就成為浏覽器的重排操作；

重排之後必會觸發重繪，浏覽器會重新繪制受影響的部分到螢幕上，此過程就是浏覽器的“重繪”

何時會觸發重排

當頁面布局的幾何屬性改變時就需要重排

1. 添加或删除可見的DOM元素
2. 元素的位置改變
3. 元素的尺寸改變
4. 内容改變（例如：文本改變或圖檔被替換成另一張不同尺寸的圖檔替換）
5. 頁面渲染初期
6. 浏覽器視窗尺寸改變
7. 擷取特殊的布局資訊（例如：offset* clinet* scroll* getComputedStyle,currentStyle ）
   1. 因為以上的屬性和方法需要傳回的是最新的布局資訊，是以浏覽器不得不執行渲染隊列中的“待處理”變化，進而觸發重排以便傳回正确的值

如何盡量防止重排的發生（以提高浏覽器渲染速度）

1. 合理緩存元素的幾何屬性
2. 批量修改dom時
   1. 脫離文本流操作
   2. 文檔片斷 document.createDocumentFragment(一種輕量級dom對象)
   3. 節點clone(true)然後對副本進行操作，再替換原來的整個節點
3. 添加/替換樣式時使用cssText = ”border-left:1px solid red ......;”
4. addClass(’xxx’)
5. 減少dom操作，減少浏覽器視窗伸縮