1. 重排和重绘概念
- 浏览器下载完页面中的所有组件（HTML,CSS,JavaScript,图片）之后会解析生成两个内部数据结构（DOM树和渲染树）
- DOM树表示页面结构，渲染树表示DOM节点如何显示，
-
重排是DOM元素的几何变化，DOM树结构变化，渲染树需要重新计算
4.重绘是当页面中的元素样式的改变并不影响它在文档流中的位置，比如改变背景，颜色，字体等等，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观，由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成，但是table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中的节点属性，比同元素要多花两倍时间，因此尽量避免使用table布局
2. 触发重排的情况
- 页面渲染初始化时候 ，
- 浏览器尺寸变化时，
- 元素尺寸发生改变
- 元素位置发生改变
- 元素内容发生改变
- 添加或者删除可见的DOM元素
3.常见的触发重绘的属性
| 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 |
4. 性能优化
- 减少DOM访问，讲多次改变样式属性操作合并成一次操作
- 如果需要批量操作DOM，可以先让元素脱离文档流，操作完在带入文档流，这样只会触发一次重排（fragment元素的应用）
- 由于display:none的元素不再渲染树中，对隐藏的元素操作不会引起其他元素的重排
- 在内存中多次操作节点完成之后添加到文档中
- 尽量不要在布局信息改变时做查询操作（会导致渲染队列强制刷新）
6.需要多次重排的元素，使用position：absolute或者fixed，使其脱离文档流
参考文档：[深入理解浏览器的重绘与重排]:https://blog.csdn.net/lhjuejiang/article/details/79793331
[影响浏览器重绘和重排]:http://www.cnblogs.com/yuri2016/p/6542625.html
网友评论