Web页面Repaint和Reflow

最新推荐文章于 2022-11-06 20:43:59 发布

BorisHuai

最新推荐文章于 2022-11-06 20:43:59 发布

阅读量3.1k

点赞数 1

分类专栏： CSS DOM 前端性能优化 JavaScript

本文链接：https://blog.csdn.net/borishuai/article/details/8671977

版权

14 篇文章 0 订阅

订阅专栏

13 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

repaint(重绘)是在一个元素的外观被改变，但没有改变布局的情况下发生，如改变visibility、outline、前景色。当repaint发生时，浏览器会验证DOM树上的所有其它结点的visibility属性。

如果变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow，都会导致它的子结点及祖先结点重新渲染。

以下操作会引起reflow:

Reflow是不可避免的，只能将reflow对性能的影响减小到最小，以下是一些建议：

尽可能限制reflow的影响范围。有时 reflow 页面中的一个元素会 reflow 它的父元素（译注：这里是复数）以及所有子元素。
通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow。所以最好通过设置class的方式。
实现元素的动画，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局。
权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
很多情况下都会触发reflow，如果css里有expression，每次都会重新计算一遍。
避免在document上直接进行频繁的DOM操作，如果确实需要可以采用off-document的方式进行
- 先将元素从document中删除，完成修改后再把元素放回原来的位置
- 将元素的display设置为”none”，完成修改后再把display修改为原来的值
- 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入