重绘与回流，保姆级教程！（前端性能优化）

这篇文章非常适合复习，以及面试的小伙伴们。同时我也给零基础的小伙伴找到了一篇优秀的入门文章，在页面底部

浏览器渲染过程如下：

1. 解析html，生成 DOM 树
2. 解析css，生成 CSS 树
3. 合并 DOM 树与 CSS 树，生成渲染树（render tree）
4. 节点布局
5. 页面渲染

重绘与回流

渲染过程解析：

• 浏览器解析html会生成 DOM 树，解析css会生成 CSS 树，然后合并成为一个渲染树（render tree）。
• 注意！！渲染树只会包含可视化节点，比如 script、head、meta、link 这些非可视化的节点就不会包含，当然也不会包含样式为 display:none; 的节点。
• 浏览器根据渲染树进行布局。浏览器会计算每一个节点在视图内的确切位置和大小，所有相对值都会转换为屏幕上的绝对像素，最终展示页面，通常这样的过程称为回流与重绘。
• 每个页面至少会发生一次回流与重绘，在页面开始加载的时候，浏览器需要根据渲染树进行布局与渲染。

回流（reflow）：

• 当节点样式发生改变影响到页面布局时，会产生回流。相当于刷新页面（比如宽高、边框大小、内外边距等）。
• js对 DOM 元素的增、删、改也会产生回流。改变 DOM 容易导致整体布局发生变化。

​

重绘（repaint）：

• 当节点样式发生改变但是不影响布局时，会产生重绘。只会动态更新样式（比如颜色、透明度、背景）。
• 重绘相对于回流性能影响较小

重绘不一定引发回流，回流一定会引发重绘

减少回流与重绘的方式：

css：

• 能使用 transform 就不要使用其他样式来控制节点，transform 不会引起回流与重绘的。
• 少使用display:none，如果可以用 visiblity 就不用none。当然最好使用opacity来代替，因为不会引起回流与重绘的。
• 通过开图层（z-index）减少回流与重绘，浏览器对不同的层级会使用单独的渲染
• 对于复杂动画一定要让他脱离文档流，可以使用绝对定位，脱离后会开启新的流，这样只会“回流和重绘”动画的这一个小部分。

JavaScript：

• 频繁的添加 DOM，可以使用 createDocumentFragement (文档碎片)，先加入文档碎片中再添加到 DOM 元素中。
• js 频繁切换样式，可以改为切换 class 。
• js 做动画使用 requestAnimationFrame API，尽量不要使用计时器。
• 减少如下 API 的使用。使用如下 API 会获取最新的样式，这样会清空队列中存放的修改历史，造成回流与重绘。
  • offsetTop、offsetLeft、offsetWidth、offsetHeight
  • scrollTop、scrollLeft、scrollWidth、scrollHeight
  • clientTop、clientLeft、clientWidth、clientHeight
  • getComputedStyle()
  • getBoundingClientRect

零基础的看这里

对于零基础的小伙伴可以先看这里我推介的篇文章，再来我看我的精简的总结。

• https://juejin.cn/post/6844903779700047885

感兴趣还可以关注我的：

cnsd：m0_46217225

掘金：寸头男生

github：Buzz_cut

微信公众号：web_mycode

知乎：寸头男生

我的QQ：2356924146

我会持续的编程干货。