重繪和重排定義

1. 重繪：當渲染樹中的元素外觀（如：顏色）發生改變，不影響佈局時，產生重繪

2. 迴流：當渲染樹中的元素的佈局（如：尺寸、位置、隱藏/狀態狀態）發生改變時，產生重繪迴流

注意：JS獲取Layout屬性值（如：offsetLeft、scrollTop、getComputedStyle等）也會引起迴流。因為瀏覽器需要通過迴流計算最新值

  3. 迴流必將引起重繪，而重繪不一定會引起迴流

如何最小化重繪(repaint)和迴流(reflow)？

• 需要要對元素進行復雜的操作時，可以先隱藏(display:"none")，操作完成後再顯示

• 需要建立多個DOM節點時，使用DocumentFragment建立完後一次性的加入document

• 快取Layout屬性值，如：var left = elem.offsetLeft; 這樣，多次使用 left 只產生一次迴流

• 儘量避免用table佈局（table元素一旦觸發迴流就會導致table裡所有的其它元素迴流）

• 避免使用css表示式(expression)，因為每次呼叫都會重新計算值（包括載入頁面）

• 儘量使用 css 屬性簡寫，如：用 border 代替 border-width, border-style, border-color

• 批量修改元素樣式：elem.className 和 elem.style.cssText 代替 elem.style.xxx