聪明的浏览器
从上个实例代码中可以看到几行简单的 JS 代码就引起了 6 次左右的回流, 重绘. 而且我们也知道回流的花销也不小, 如果每句 JS 操作都去回流重绘的话, 浏览器可能就会受不了. 所以很多浏览器都会优化这些操作, 浏览器会维护 1 个队列, 把所有会引起回流, 重绘的操作放入这个队列, 等队列中的操作到了一定的数量或者到了一定的时间间隔, 浏览器就会 flush 队列, 进行一个批处理. 这样就会让多次的回流, 重绘变成一次回流重绘.
虽然有了浏览器的优化, 但有时候我们写的一些代码可能会强制浏览器提前 flush 队列, 这样浏览器的优化可能就起不到作用了. 当你请求向浏览器请求一些 style 信息的时候, 就会让浏览器 flush 队列, 比如:
1. offsetTop, offsetLeft, offsetWidth, offsetHeight
- scrollTop/Left/Width/Height
- clientTop/Left/Width/Height
- width,height
5. 请求了 getComputedStyle(), 或者 IE 的 currentStyle
当你请求上面的一些属性的时候, 浏览器为了给你最精确的值, 需要 flush 队列, 因为队列中可能会有影响到这些值的操作. 即使你获取元素的布局和样式信息跟最近发生或改变的布局信息无关, 浏览器都会强行刷新渲染队列.
来源: https://www.cnblogs.com/chenhongshuang/p/8743024.html