性能优化--避免回流和重绘

回流必定有重绘，重绘不必定有回流

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. 避免重复读取同一元素几何信息，能够用变量暂存