揭秘web页面性能杀手：reflow(回流)和repaint(重绘)

web页面性能中的隐形杀手：reflow(回流)与repaint(重绘)

reflow和repaint这两个词，也许对于没有前端开发经验的朋友们来说有些陌生。但是对于前端开发者来说，这些却是如影随形、无法回避的两个性能问题。简单来说，reflow（也称回流）是DOM（Document Object Model,文档对象模型）树发生变化时浏览器会重新计算受影响元素的几何属性的过程，这个过程是比较耗时的。而repaint（也称重绘）是浏览器重新绘制受影响元素的过程，这个过程相对reflow要轻量一点。

reflow和repaint往往会结伴出现，虽然他们的具体表现形式有所差异，但都是浏览器渲染页面的必要步骤。其背后的渲染机制十分复杂，涉及到浏览器内核、操作系统和计算机硬件等多个层面。了解并掌握reflow和repaint的发生时机和影响因素，对于提升网页性能具有重要的意义。

触发reflow和repaint的常见操作

reflow和repaint可能由各种操作触发，常见的有以下几种情况：

1. 添加或删除元素：当往DOM树中添加或删除元素时，浏览器必须重新计算整个受影响元素的布局，触发reflow和repaint。

2. 更改元素的样式：当元素的样式发生改变时，浏览器必须重新计算受影响元素的布局，触发reflow和repaint。

3. DOM树的动态改变：当元素的子元素发生改变时，浏览器必须重新计算受影响元素的布局，触发reflow和repaint。

4. 窗口大小发生改变：当窗口大小发生改变时，浏览器必须重新计算所有元素的布局，触发reflow和repaint。

5. 滚动页面：当页面发生滚动时，浏览器必须重新计算所有可见元素的布局，触发reflow和repaint。

减少reflow和repaint的优化策略

1. 避免频繁的DOM操作： 减少不必要的DOM操作，例如频繁的添加、删除或移动元素。尽量使用CSS动画或JavaScript动画来代替DOM操作。

2. 尽量使用CSS3属性： CSS3中的一些属性，例如transform、opacity和filter，可以改变元素的样式而不会触发reflow和repaint。

3. 使用CSS选择器来优化样式： 避免使用通用选择器，例如*和body，而应使用更具体的CSS选择器，例如#id和.class。

4. 合理地使用布局： 减少层叠和嵌套，尽量使用简单的布局结构。使用弹性布局和网格布局可以减少reflow和repaint的发生。

5. 延迟加载和惰性加载： 对于非关键元素，可以使用延迟加载或惰性加载技术，只在需要时加载这些元素。

6. 使用硬件加速： 硬件加速可以将某些渲染任务从CPU转移到GPU，从而提高渲染速度。在支持硬件加速的浏览器中，可以使用CSS的transform、translate和scale属性来启用硬件加速。

7. 使用浏览器提供的优化工具： 大多数浏览器都提供了优化工具，可以帮助开发人员分析和优化页面的性能。例如，Chrome浏览器的开发者工具中的性能面板可以帮助开发人员识别reflow和repaint的发生情况，并提供优化建议。

结语

reflow和repaint是浏览器渲染页面的过程中不可避免的两个步骤，优化好它们可以大大提升网站的性能，改善用户体验。但即使已经做出优化，如果用户是移动端设备，也会明显感觉网络延迟，这些问题就只能由网站设计者来处理了，除了优化站点本身性能以外，还可以努力做到减少页面的不必要操作，鼓励用户进行快速操作。