HTML5教程

快速掌握重绘与回流(前端性能优化)

本文主要是介绍快速掌握重绘与回流(前端性能优化),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

这篇文章非常适合复习,以及面试的小伙伴们

游览器渲染过程如下:

在这里插入图片描述

  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
这篇关于快速掌握重绘与回流(前端性能优化)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!