浏览器渲染页面/reflow repaint

Posted 2021-03-04 zhoujingye

 影响页面渲染速度主要有：reflow(回流)和repaint(重绘) 

 reflow(回流)：

页面为什么会慢？那是因为浏览器要花时间、花精力去渲染，尤其是当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染， 该过程称为reflow（回流）。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染，通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

 

repaint(重绘)：

如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。

repaint 的速度明显快于 reflow（在IE下需要换一下说法，reflow 要比 repaint 更缓慢）。

 

尽量避免reflow(回流)                

 reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow，都会导致它的子结点及祖先结点重新渲染。

在哪些情况下会导致reflow发生：

1. 改变窗囗大小
2. 改变文字大小
3. 添加/删除样式表
4. 内容的改变，如用户在输入框中敲字
5. 激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)
6. 操作class属性
7. 脚本操作DOM
8. 计算offsetWidth和offsetHeight
9. 设置style属性

 reflow是不可避免的，只能将reflow对性能的影响减到最小。

1. 尽可能限制reflow的影响范围。需要改变元素的样式，不要通过父级元素影响子元素。最好直接加在子元素上。
2. 通过设置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，每次都会重新计算一遍。
• 减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
• 避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU

来源：https://www.cnblogs.com/Peng2014/p/4687218.html