本文主要是介绍快速掌握重绘与回流(前端性能优化),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
这篇文章非常适合复习,以及面试的小伙伴们
游览器渲染过程如下:
- 解析html,生成 DOM 树
- 解析css,生成 CSS 树
- 合并 DOM 树与 CSS 树,生成渲染树(render tree)
- 节点布局
- 页面渲染
重绘与回流
渲染过程解析:
- 游览器解析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
这篇关于快速掌握重绘与回流(前端性能优化)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!