前端性能优化关键词:reflow


什么是Reflow

reflow(Gecko)或者 layout(webkit) 是浏览器计算页面的布局的过程。元素的reflow重新计算元素的尺寸和位置,还可能触发子元素、祖先元素、DOM中后面相邻元素的reflow,然后调用repaint。reflow很昂贵,但却可以很容易触发,触发太频繁会导致性能问题。

引起reflow的操作都有哪些

插入、修改或更新DOM中的元素。
修改网页中的内容,比如输入框中的文字。
移动DOM元素。
为DOM元素设置动画。
测量一个元素,如 offsetHeight 或 getComputedStyle。
更改CSS样式。
更改元素的className。
添加或删除样式表。
调整窗口大小。
滚动。

参考文档:

http://stackoverflow.com/questions/27637184/what-is-dom-reflow
https://developers.google.com/speed/articles/reflow
https://gist.github.com/paulirish/5d52fb081b3570c81e3a
http://kellegous.com/j/2013/01/26/layout-performance/
https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/