回流/重排(reflow)与重绘(repaint)

回流/重排(reflow): 渲染树(Render Tree)中一些节点的尺寸、位置、可见性等属性发生改变时需要重新计算几何信息,浏览器重新渲染页面,导致页面布局变化的过程。

重绘(repaint): 当页面元素的样式改变不影响其在文档流中的尺寸、位置、可见性,如改变元素的字体颜色、背景颜色等,就是重绘,这个过程不会导致页面的布局变化。

因为回流会导致页面重新布局,所以性能上的消耗要比重绘大,所以在开发过程中,要避免进行导致回流的操作。

引起回流的操作

1.页面初始化渲染(不可避免);
2.添加或删除可见的 DOM 节点,改变 DOM 节点可见性;
3.改变元素的尺寸(几何信息),如 margin、padding、width、height、border、fontSize;
4.改变元素的位置;
5.调整浏览器窗口大小;
6.获取 DOM 某些属性的值(为了获得准确的值),如 offsetTop / offsetLeft / offsetWidth / offsetHeight,scrollTop / scrollLeft / scrollWidth / scrollHeight,clientTop / clientLeft / clientWidth / clientHeight;
7.调用 getComputedStyle(),或 IE 的 currentStyle()。

减少回流操作的开发建议:

1.避免多条导致回流的样式改变,可以改为用 cssText 或 class 实现;
2.避免导致回流的 DOM 操作,可以先隐藏 DOM 元素进行 DOM 操作,再恢复显示,或者将要操作的 DOM 节点拷贝添加到文档片段(Document Fragment)中,在文档片段上执行 DOM 操作完成后,再从文档片段中取出节点替换页面原来的节点;
3.避免反复读取部分引起回流的属性,可以用变量存储起来;
4.实现一些复杂的动画,可以先将元素设置绝对定位或固定定位,使元素脱离文档流,或者使用 CSS3 实现动画效果。

参考阅读:浏览器渲染页面过程

此条目发表在前端分类目录,贴了, , 标签。将固定链接加入收藏夹。