最小化重繪和重排之緩存布局資訊

浏覽器有其自身的最小化重繪和重排的政策，即使用一個隊列将需要重排的操作儲存，然後進行批量執行以減小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()