页面优化---Reflow()回流Repaint()重绘

菜菜菜鸟日记—Reflow()回流与Repaint()重绘

一.什么是Reflow(),Repaint()

1. Reflow()
   指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。每个页面至少需要一次回流，在页面第一次加载的时候。根据HTML渲染过程，回流一定会引起重绘，而重绘不一定会引起回流，因此回流的开销较大，会影响页面性能。
2. Repaint()
   如果只是改变某个元素的background-color、color、outline等只是影响元素的外观样式，不会影响它周围或内部布局。将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow。

二.如何提高页面性能
因为Reflow()回流造成的开销较大，要提高页面性能，避免reflow的开销成为页面优化的重要途经。首先要了解哪些页面操作会引起页面回流。
三.引起Reflow()回流的操作

1. 对DOM节点进行增删移动。
2. 改变窗口或页面文字大小时。
3. 激活伪类时，如:hover。
   …