浏览器的重排与重绘是什么意思？

为了理解重排与重绘，我们首先需要了解一点浏览器渲染的基础知识 ~

网页生成分为五步：

1. HTML 被 HTML 解析器解析成 DOM 树

2. CSS 被 CSS 解析器解析成 CSSOM 树

3. 结合 DOM 树和 CSSOM 树，生成一颗渲染树（Render Tree）

4. 将所有渲染树的所有子节点进行平面合成，生成布局（flow）  -- 重排（回流）

5. 将布局绘制（paint）在屏幕上   -- 重绘

其中 4 5 步是最耗时的，这两步就是我们常说的 渲染 

 网页生成时候，至少会渲染一次，在用户访问的过程中，可能会不断的重新渲染，即执行上述第 4 5 步，或者只执行第 5 步。

简单来说：

重排指重新生成布局，重新排列元素。例如margin: 10px 变成 margin: 20px，会导致重排；

重绘指重新描绘已经生成的布局。例如颜色改变，仅会触发重绘

重排必定会导致重绘，重绘不一定有重排。因为重排在重绘前执行。所以上述 margin 改变 ，重排完成后触发重绘，成本是很高的。

 引起重排的属性和方法

width	height	margin	padding
display	border	position	overflow
clientWidth	clientHeight	clientTop	clientLeft
offsetWudth	offsetHeight	offsetTop	offsetLeft
scrollWidth	scrollHeight	scrollTop	scrollLeft
scrollIntoView()	scrollTo()	getComputedStyle()
getBoundingClientRect()	scrollIntoViewIfNeeded()

 引起重绘的属性

color	border-style	visibility	background
text-decoration	background-image	background-position	background-repeat
outline-color	outline	outline-style	border-radius
outline-width	box-shadow	background-size

 

样式优化建议

 

未完待续 ~