Repaint & Reflow

最新推荐文章于 2024-08-12 22:28:07 发布

weixin_33881041

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量66

点赞数

文章标签： javascript ViewUI

版权

原文地址：Repaint & Reflow作者：二原格

Yahoo!性能工程师Nicole Sullivan写了一篇非常值得一读的分析Reflow和Repaint的文章。

repaint(重绘)是在一个元素的外观被改变，但没有改变布局的情况下发生，如改变visibility、outline、前景色。

"According to Opera , repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree."

当repaint发生时，浏览器会验证DOM树上的所有其它结点的visibility属性。

reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow，都会导致它的子结点及祖先结点重新渲染。Nicole举了个例子：

  1: <body>

  2: <div class=”error”>

  3: <h4>My Module</h4>

  4: <p><strong>Error:</strong>Description of the error…</p>

  5: <h5>Corrective action required:</h5>

  6: <ol>

  7: <li>Step one</li>

  8: <li>Step two</li>

  9: </ol>

 10: </div>

 11: </body>

当p结点上发生reflow，div.error和body也会重新渲染，甚至h5和ol也会受到影响。

Nicole总结了在哪些情况下会导致reflow发生：

reflow是不可避免的，只能将reflow对性能的影响减到最小。Nicole提出6点建议：

Change classes on the element you wish to style (as low in the dom tree as possible)
尽可能限制reflow的影响范围。以上面的代码为例，要改变p的样式，class不要加在div上，通过父级元素影响子元素不好。最好直接加在p上。
Avoid setting multiple inline styles
通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow。所以最好通过设置class的方式。
Apply animations to elements that are position fixed or absolute
实现元素的动画，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局。
Trade smoothness for speed
权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
Avoid tables for layout
不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用 table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
Avoid JavaScript expressions in the CSS (IE only)
很多情况下都会触发reflow，如果css里有expression，每次都会重新计算一遍。

额外补充：

参考文献：

posted on 2013-05-18 00:09 又一春夏阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/yizhou35/archive/2013/05/18/3084775.html

关注