重排和重绘
-
概念
重排：如果DOM的变化影响到几何属性比如宽度或者需要获取到最新的几何数据，浏览器需要重新构造渲染树，计算它们在视口的确切位置和大小
重绘：浏览器将受到影响的部分重新绘制到屏幕上的过程称为重绘
-
重排一定会触发重绘，重绘不一定会重排
-
引起重排的原因有：
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素尺寸发生变化
- 浏览器窗口尺寸变化
引起重绘的原因有：没有涉及几何属性的计算，比如改变元素背景色时
-
浏览器优化：
浏览器会将一段时间内的DOM修改操作放到一个队列里，当过了一段时间或者队列满时，才会清空队列。但是如果你获取布局信息时，会强制队列刷新，因为要获取到最新的布局信息
-
减少回流重绘：
- 合并多次对DOM和样式的修改
- 使元素脱离文档流，比如隐藏元素，使用document fragment等，对其修改后再带回文档
- 使用transform,opacity等属性修改样式，不会引起重排重绘
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
