左小白的技术日常
Github

什么是回流(Reflow)和重绘(Repaint)?怎么避免?

这篇文章发布于 2020/11/23,归类于
标签:
回流和重绘reflowrepaintcss回流css重绘

1. 什么是回流和重绘

回流/重排(Reflow):当 Render Tree 中部分或全部元素的尺寸、结构或位置发生改变时,浏览器会重新渲染部分或整个文档的过程就称为Reflow

重绘(RePaint): 当页面中元素样式的改变并不影响它在文档中的位置时,浏览器会重绘该区域,这个过程称为重绘

2. 回流和重绘的比较

DOM、CSS style的改变会照成回流或者重绘,回流比重绘更消耗性能

3. 如何避免回流或重绘

CSS:

JavaScript

参考: