最小化重绘和重排之缓存布局信息

浏览器有其自身的最小化重绘和重排的策略，即使用一个队列将需要重排的操作保存，然后进行批量执行以减小reflow和repaint的次数。然而，我们在操作DOM或者编写交互的JavaScript脚本时通常需要动态获取以下信息：

• offsetTop、offsetLeft、offsetWidth、offsetHeight等；
• clientTop、clientLeft、clientWidth、clientHeight等；
• scrollTop、scrollLeft、scrollWidth、scrollHeight等；
• getComputedStyle()(兼容性较好，主流及IE9+均支持)

由于是动态获取这些布局信息，因此每次查询这些属性值时都会触发上述的队列进行reflow和repaint，从而达不到最小化重绘和重排的目的。
其实，我们只需要使用一个局部变量缓存这些需要查询的值，高密度执行的操作中（拖拽等操作）这些值暂时会使用这个缓存的值而不是每次使用上述的那些信息时都要触发reflow和repaint操作。

---

References

1. MDN-getComputedStyle()