回流和重绘的英文表述分别是reflow和repaint。当DOM元素的位置、大小或内容发生变化时,浏览器会进行回流和重绘操作。回流和重绘虽然看起来相似,但其实有很大的区别。
回流(reflow) 回流是指当页面的布局或者几何属性发生改变时,浏览器重新计算元素的位置和大小,并重新布局页面的过程。这个过程非常耗费资源,对于性能影响比较大。因此,尽量避免不必要的回流操作。 重绘(repaint) 重绘是指当页面的元素不可见状态改变时,浏览器会重新绘制元素的内部和外部样式。重绘不涉及到页面的布局和几何属性的改变,因此比回流消耗较少的资源。
避免回流和重绘可以提高网站的性能。以下是几个避免回流和重绘的技巧:
- 使用CSS3动画 - 使用CSS3转换,如translate、rotate、scale等 - 避免使用table布局 - 避免在JavaScript中修改样式 - 避免频繁操作DOM元素
在实际应用中,大家需要在尽量避免回流和重绘的前提下,使页面达到理想的效果。因此,需要对回流和重绘有深入的了解,才能更好的进行页面的优化。