迴流與重繪

一、迴流與重繪概述

迴流和重繪是瀏覽器中常見的兩個操作，也是網頁性能優化的重要方面。迴流是指瀏覽器重新計算元素的位置和大小，以便渲染出正確的布局，而重繪是指瀏覽器根據新的布局繪製元素的外觀。由於迴流和重繪都需要消耗一定的資源，因此盡量減少這兩個操作對於網頁的性能優化非常重要。

二、引起迴流和重繪的操作

1、添加、刪除元素：當一個元素被添加到文檔中或者從文檔中刪除時，會觸發此元素的所有祖先元素的迴流計算。

2、元素的位置和大小變化：當元素的位置或大小發生變化時，會觸發此元素及其下面的元素的迴流。

3、修改元素內容：當元素內容的文字發生變化、圖片被修改或者樣式被改變時，會觸發此元素及其下面的元素的重繪。

三、減少迴流和重繪的方法

1、使用文檔碎片：將創建元素的操作一次性全部完成，然後將它們一起添加到文檔中，可以減少不必要的迴流操作。

let ul = document.createElement('ul');
let fragment = document.createDocumentFragment();
 
for(let i=0;i<1000;i++){
  let li = document.createElement('li');
  li.innerHTML = 'list item ' + i;
  fragment.appendChild(li);
}
 
ul.appendChild(fragment);
document.body.appendChild(ul);

2、對於需要頻繁修改樣式的元素，使用 CSS class 替換 style 屬性：修改 style 屬性會觸發迴流，而改變 CSS class 不會觸發迴流，因此盡量使用 CSS class 來修改樣式。

3、盡量減少 DOM 的操作：盡量減少元素的添加、刪除和位置、大小等的修改，因為此類操作會觸發迴流和重繪。

4、使用 css3 的 transform 屬性：使用 transform 屬性更改元素的位置和大小可以減少迴流和重繪次數。

transform:translate(10px,10px);
transform:scale(0.5,0.5);

5、盡量減少觸發迴流和重繪的操作：例如，不要在滾動事件中進行 DOM 操作或者獲取元素位置等操作。

四、迴流和重繪的性能分析

可以使用 Chrome 開發者工具的 Performance 面板來分析網頁的性能，其中如果出現綠色條的『Layout』和『Paint』，則表示出現了迴流和重繪。我們可以通過在代碼中打斷點，分析代碼的性能瓶頸，然後優化代碼，減少迴流和重繪的頻率。