重繪與重排

概念

重排：當元素的寬和高發生改變的時候，就會重新排列元素，稱為重拍。

重繪：將重排的的元素重新繪製在瀏覽器中，稱為重繪。

在元素中新增段落、新增邊框、新增或者刪除元素、修改內外邊距等，一切改變現有元素的位置的操作都會導致重排的發生。相應的，新增背景色這一類沒有改變元素位置的操作則不會導致重排和重繪。

最小化重繪和重排

重繪和重排的代價非常昂貴，為了減少發生次數，應該減少發起重排請求，儘可能將修改 DOM 的請求合併。

var el = document.getElementById('mydiv');
el.style.cssText = 'border-left:1px;border-right:2px;padding:5px;';
 

減少重排和重繪

可以通過以下步驟來減少重繪和重排的次數：

1.使元素脫離文件流

2.對其應用多重改變

3.把元素待會文件中

這樣一來，只有第一步和第三部會觸發重排。否則，如果對元素的修改較多的話，第二步會觸發多次重排。

有三種方法可以使 DOM 脫離文件：

> 隱藏元素，應用修改，重新顯示

> 使用文件片段在當前 DOM 之外構建一個子樹，再把它拷貝迴文檔。

> 將原始元素拷貝到一個脫離文件的節點中，修改副本，完成後再替換原始元素。

Hover

如果大量使用 hover 會影響效能，降低執行速度。

事件委託

如果頁面中存在大量元素，而且每一個都要一次或多此繫結事件處理器。這種情況會影響效能，因為瀏覽器需要追蹤每個事件處理器。

一個簡單而優雅的處理 DOM 事件的技術是事件委託。

它基於這樣一個事實：事件逐層冒泡並能被父級元素捕獲。使用事件代理，只需要給外層繫結一個處理器，就可以處理在其子元素上觸發的所有事件。

根據 DOM 標準，每個事件都要經歷三個階段：

- 捕獲 -到達目標 -冒泡