阅读 90

重绘与回流,保姆级教程!(前端性能优化)

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

浏览器渲染过程如下:

v2-3a63706bdaf46be6c20d9e5cc111c7e5_1440w.png

  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

零基础的看这里

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

感兴趣还可以关注我的:

cnsd:m0_46217225

掘金:寸头男生

github:Buzz_cut

微信公众号:web_mycode

知乎:寸头男生

我的QQ:2356924146

我会持续的编程干货。

文章分类
前端
文章标签