Dom的回流Reflow和重绘Repait

• 回流：元素的大小和位置的定义，触发页面重新布局，导致渲染树重新计算布局和渲染

比如添加删除课件的DOM元素；元素位置改变；元素大小改变；内容变化；页面一开始渲染（这个无法避免）；因为回流是根据视口大小计算元素的位置和大小，所以浏览器的窗口尺寸变化也会引发回流...

• 重绘：元素样式的改变（宽高、大小、位置等不变）

如：outline、visibility、color、background-color

​ 回流一定会导致重绘，重绘不一定回流

前端如何性能优化

1. 减少http请求

   1. 减少资源的数量和大小

2. 减少回流和重绘

   1. js设计页面时读写分离

      offsetTop、offsetLeft、offsetWidth、offsetHeight、clientTop、clientLeft、clientWidth、clientHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、getComputedStyle、currentStyle都会刷新渲染队列

   2. 使用缓存

      let w = box.clientWidth;
      let h = box.clientHeight;
      // 这样只用重新渲染一次
      box.style.width = w + 10 +"px"
      box.style.height = h + 10 + "px"
      

   3. 样式集中处理

   4. 放弃操作dom，基于vue/react/等数据驱动开发

   5. 动画效果应用到position属性为absolute或fixed的元素上(脱离了文档流)

   6. css3硬件加速(GUP加速) transform

   7. 牺牲平滑度换取速度

      每次1像素移动一个动画，会使用100%CPU，动画看上去是跳动的。因为浏览器正在和更新回流做斗争，每次移动3像素可能会看起平滑度低了，但是不会导致CPU在低配机器中抖动。

   8. 避免使用table布局和css的JavaScript表达式