介绍下重绘和回流

[GGXXMM]

重绘 Repaint

由于页面元素的样式改变而不影响布局时（例如：visibility、color、background-color等），浏览器会将新样式赋给元素并重新绘制它，这个过程称为重绘。

重排(回流) Reflow

当Render Tree中的部分或全部的元素节点的尺寸、结构或几何属性发生改变时，浏览器重新渲染部分或全部的文档的过程叫回流。

会导致重排的操作：

• 页面首次渲染
• 浏览器窗口大小发生变化
• 元素尺寸/位置发生变化
• 元素内容变化（文字数量、图片大小等）
• 元素字体大小变化
• 添加/删除可见的DOM元素
• 激活CSS伪类（如:hover)
• 查询某些属性/方法

会导致重排的属性和方法：

• clientWidth、clientHeight、clientTop、clientLeft
• offsetWidth、offsetHeight、offsetTop、offsetLeft
• scrollWidth、scrollHeight、scrollTop、scrollLeft
• scrollIntoView()、scrollIntoViewIfNeeded()
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

注意：回流必定会引起重绘，重绘不一定会引发回流。