回流

• 当页面的尺寸或结构发生变化时，文档会部分或全部重新渲染
  
• 页面进行如下操作时会发生回流：
  
  • 页面首次渲染
    
  • 浏览器窗口发生改变
    
  • ......
    

重绘

• 当页面颜色等元素发生改变，文档会进行部分改变，但不会大面积重新渲染
  
• 页面进行如下操作时会发生重绘：
  
  • 颜色发生改变
    
  • 图片更改（大小不变）
    
  •     ......
    

区别（回流一定重绘，但重绘不一定回流）

• 简单思考一下，回流引发的文档重新渲染一定会引起文档元素的重新渲染，但反过来元素改变引发的重绘，并不影响整个文档的结构
  (莫名想起这张图片)

  

由上我们可以看出，回流的代价相比于重绘来说要大得多
那么有没有方法可以减少回流与重回的的次数呢？

优化

浏览器优化

• 既然出现了问题，那么浏览器作为前端的重要生产力工具首先就会帮我们解决一些问题
  
• 首先浏览器会像Event Loop那样生成一个队列，然后将所有会产生重绘与回流情况的操作放入队列中，当队列中的操作数量或队列持续的时间达到一定数值时，队列会进行一个批处理，这样就可以让多次操作合并成一次，从一定程度上的减少了性能的消耗

代码优化

• 当然浏览器优化能解决的问题毕竟很少，主要还是要靠自己

css方面

• 动画元素可以使用absolute或其他能够使其脱离文档流的定位
  
• 尽量避免多层的内联元素嵌套
  
• 避免使用css表达式
  
• ......

JS方面

• 避免频繁的操作style属性，如有需要，尽量减少次数
  
• 可以使用documentFragment进行文档数据的替换，无需引发文档重新渲染
  
• 可以将部分不需要的内容设为display：none；，需要时取消即可，不会引发回流
  
• 可以适当使用缓存方式减少回流次数
  

如有错误，希望提出

希望大家都能早日拿到心仪的offer，加油，共勉