性能優化--避免迴流和重繪

迴流必定有重繪，重繪不必定有迴流

1、定義

• 迴流：幾何屬性改變，例如元素位置，大小改變
  

  css屬性:
  一、盒模型相關屬性: width, height, margin, display, border等
  二、定位屬性及浮動相關的屬性: top, position, float等
  三、內部文字結構: text-align, overflow, font-size, line-height, vertical-align等
  
  操做:
  一、頁面第一次渲染
  二、刪除或添加元素
  三、css僞類激活，好比hover等
  四、查詢元素幾何信息，好比調用getBoundingClientRect,offsetWidth,offsetHeight,scrollTop,widht,height,getComputedStyle等 五、內容發生變化，好比文本被替換 六、瀏覽器尺寸改變

• 重繪：填充像素的過程，改變外觀。例如背景色、背景圖、邊框、子代、輪廓
  css屬性:
  一、background-color 二、visiblity 三、outline

2、避免方法

1. 避免使用table佈局

2. 避免分次改變css屬性，好比

const a = document.getElementById('a')
a.style.width = '10px'
a.style.height = '10px'
a.style.marginTop = '10px'
複製代碼

能夠改成

const a = document.getElementById('a')
a.style.cssText += 'width: 10px;height: 10px;marginTop: 10px'
複製代碼

3. 減小動畫複雜度，儘可能使用transform代替動畫裏的位置變化，儘可能使用opcity代替visiblity。由於transform和opcity會跳過layout和painting過程，直接被composite合成操做

4. 使用display: none模擬刪除或者添加元素

5. 避免重複讀取同一元素幾何信息，能夠用變量暫存