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

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

一、定义

• 回流：几何属性改变，例如元素位置，大小改变
  

  css属性:
  1、盒模型相关属性: width, height, margin, display, border等
  2、定位属性及浮动相关的属性: top, position, float等
  3、内部文字结构: text-align, overflow, font-size, line-height, vertical-align等
  
  操作:
  1、页面第一次渲染
  2、删除或添加元素
  3、css伪类激活，比如hover等
  4、查询元素几何信息，比如调用getBoundingClientRect,offsetWidth,offsetHeight,scrollTop,widht,height,getComputedStyle等 5、内容发生变化，比如文本被替换 6、浏览器尺寸改变

• 重绘：填充像素的过程，改变外观。例如背景色、背景图、边框、子代、轮廓
  css属性:
  1、background-color 2、visiblity 3、outline

二、避免方法

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