专注于
IT技术和业内交流

回流(reflow)与重绘(repaint)

回流(reflow):当渲染树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。每个页面至少需要一次回流,就是在页面第一次加载的时候。

重绘(repaint):当渲染树中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。

注:从上面可以看出,回流必将引起重绘,而重绘不一定会引起回流。

导致回流/重绘的原因:

  • 调整窗口大小
  • 改变字体
  • 增加或者移除样式表
  • 激活CSS伪类,比如:hover(IE中为兄弟结点伪类的激活)
  • 操作Class属性
  • 脚本操作DOM
  • 计算offsetWidth和offsetHeight属性
  • 设置style属性的值

解决方案

以下是一些简单的指导方针可以帮助你页面上的回流(reflow)减到最小:

  • 减少不必要的DOM深度。因为无论你改变DOM节点树上任何一个层级都会影响节点树的每个层级——从根结点一直到修改的子节点。不必要的节点深度将导致执行回流时花费更多的时间。如果想设定元素的样式,通过改变元素的class名(尽可能在DOM树的最末端)
  • 精简css,去除没有用处的css
  • 如果你想让复杂的表现发生改变,例如动画效果,那么请在这个流动线之外实现它。使用position-absolute或position-fixed来实现它。
  • 避免不必要的复杂的css选择符,尤其是使用子选择器,或消耗更多的CPU去做选择器匹配。
  • 避免设置多项内联样式
  • 避免使用table布局
  • 避免使用CSS的javascript表达式(仅IE浏览器)

未经允许,不得转载本站任何文章:代码山 » 回流(reflow)与重绘(repaint)

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们