DOM學習之路二--DOM操做優化--Mr.Ember

DOM編程

1. 訪問和修改DOM元素
2. 修改DOM元素的樣式會致使重繪和重排
3. 經過DOM事件處理與用戶交互

 

瀏覽器一般會把DOM和JavaScript獨立實現。兩個獨立的功能只要經過彼此的接口連接，就會產生消耗。訪問的次數越多，產生的消耗越多，因此儘可能減小過橋的次數。

 

DOM的訪問和修改

1. innerHTML比DOM（document.createElement)方法更快

2. 節點克隆：使用DOM方法更新頁面的另外一個方法就是克隆已有元素，而不是建立新的元素。

 

html集合

1. document.getElementByxxxx返回的都是html集合。這類集合是類數組。有數組length屬性，可是沒有push()和slice()等方法。每次迭代，讀取元素集合的length就會引起集合的更新。這對於瀏覽器來講有很明顯的性能問題。

2. 優化方法： 把集合的長度緩存到一個局部變量裏，而後在循環條件退出語句使用該變量。

3. 訪問集合元素時使用局部變量：通常來講，對於任何類型DOM訪問，須要多訪問一次DOM屬性或方法，最好使用一個局部變量緩存此成員。

 

遍歷DOM

1. 獲取DOM元素：一般咱們須要某一個DOM元素開始，操做周圍的元素，或者遞歸查找全部的子節點。你可使用childNOdes獲得元素集合，或者使用nextSibling來獲取每一個相鄰元素。
2. 選擇器API：根據合適的情景，選擇getElementByxxxx和queryselect，建議使用queryselct速度比較快

 

重繪和重排

瀏覽器下載完全部的組件，會解析生成兩種數據結構

1. DOM樹：表示頁面結構
2. 渲染樹：表示DOM節點如何顯示

 

重排什麼時候發生

1.　添加或刪除可見的DOM元素

2. 元素位置改變

3. 元素尺寸改變
4. 內容改變
5. 頁面渲染器初始化
6. 瀏覽器窗口尺寸改變

 

渲染樹變化的排隊與刷新

優化：不要在佈局信息改變時查詢它，把讀取的代碼放在末尾

 

最小化重繪和重排

1. 改變樣式: 一次性改變多個樣式
2. 批量修改DOM

       減小重繪和重排步驟：

1. 使元素脫離文檔流
2. 對元素應用多重改變
3. 把元素帶回文檔中

 

        方法：

 

1. 經過改變display屬性，臨時從文檔中移除元素，而後再恢復它
2. 在文檔以外建立並更新一個文檔片斷，而後把它附加到原始列表裏，
3. 爲須要修改的節點建立一個備份，而後對副本進行操做，一旦操做完成，就用新的節點代替舊的節點。

 

  　　var old = document.getElementById('mylist')

　　 var clone = old.cloneNode(data)

　　 appendDataToElement(clone, data)

　　 old.parentNode.replaceChild(clone, old)

 

緩存佈局信息

瀏覽器嘗試經過隊列化修改和批量執行的方式最小化重排次數。因此查詢佈局信息時，儘可能減小布局查詢的次數，獲取後把他賦值給局部變量，而後操做局部變量。

 

讓元素脫離動畫流

使用如下步驟能夠避免頁面中大部分重排

1. 使用絕對位置定位頁面上的動畫元素，將其脫離文檔流
2. 讓元素動起來，當他擴大時，會臨時覆蓋部分頁面。但這只是頁面的一小區域的重繪，不會產生重排並重繪頁面的大部份內容
3. 當動畫結束時恢復定位，從而只會下移一次文檔的其餘元素。

 

IE和hover

當有大量的hover會下降相應速度

 

事件委託

使用事件委託減小處理器的數量