DOM操做的性能優化

DOM操做的真正問題在於 每次操做都會出發佈局的改變、DOM樹的修改和渲染。

React解決了大面積的DOM操做的性能問題，實現了一個虛擬DOM，即virtual DOM,這個咱們一條條講。

因此關於DOM操做的性能優化主要包括：

1.查找元素的優化

2.儘可能避免或減小改變DOM（好比添加，修改，刪除DOM）

3.減小改變DOM的樣式類

4.批量修改DOM

5.減小Iframe

6.樣式放在header中，腳本放在關閉標籤</body>以前

7.就是我剛纔所說的大名鼎鼎的Virtual DOM

 

1.查找元素的優化

查找元素儘可能使用ID，由於ID是惟一的，查找起來也是最快的。其次是根據類和類型查找元素，經過屬性查找元素是最慢的。

 

 

2.儘可能避免或減小改變DOM（好比添加，修改，刪除DOM）

改變DOM就會引發瀏覽器渲染，並且渲染是至關慢的，應米麪沒必要要的渲染

例如：

divUpdate.innerHTML = "";  
for ( var i=0; i<100; i++ )  
{  
 divUpdate.innerHTML += "<SPAN>This is a slower method! </SPAN>";  
}  

改成

var str="";  
 for ( var i=0; i<100; i++ )  
 {  
  str += "<SPAN>This is faster because it uses a string! </SPAN>";  
 }  
 divUpdate.innerHTML = str;  

  

3.減小改變DOM的樣式類

 改變DOM元素的樣式，類也會致使瀏覽器渲染，所以也應該減小沒必要要的操做

例如：

 var el = document.getElementById('mydiv');   
el.style.borderLeft = '1px';   
el.style.borderRight = '2px';   
el.style.padding = '5px';   

改成：

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

  

4.批量修改DOM

從文檔流中先摘除該元素，對其應用多重改變，再將元素帶回文檔中，這樣能夠最小化重繪和重排。

具體方法：

一、隱藏元素，集中修改，而後再顯示它

二、講原始元素拷貝到一個脫離文檔流的結點中，修改副本，而後覆蓋原始元素

 

 

5.減小Iframe

iframe須要消耗大量的時間，並阻塞下載，建議少用

聽說動態地給iframe添加url能夠改善性能，未作測試

 

 

6.樣式放在header中，腳本放在關閉標籤</body>以前

樣式放在header中，能夠加快渲染，腳本放在關閉標籤</body>以前能夠加快下載速度，避免阻塞下載。

 

 

7.大名鼎鼎的Virtual DOM

Virtual DOM的核心思想是：批量操做DOM和做用最少的diff

你一個接一個地去修改30個節點的時候，就會引發30次（潛在的）佈局重算，30次（潛在的）重繪，等等。

以後，一旦你要把這些改動傳遞給真實DOM，以前全部的改動就會整合成一次DOM操做。這一次DOM操做引發的佈局計算和重繪可能會更大，可是相比而言，整合起來的改動只作一次，減小了（屢次）計算。

這就是所謂的Virtual DOM算法，包括幾個步驟：

1.用javascript對象結構表示DOM樹的結構，而後用這個樹構建一個真正的DOM樹，插入到文檔流中

2.當文檔變動時，從新構造一顆新的對象樹，而後用新的對象樹和舊的對象樹對比，記錄兩棵樹的差別

3.把2所記錄的差別應用到1所構建的真正的DOM樹上，就實現變動了

 

Virtual DOM本質上就是在JS和DOM之間作了一個緩存。能夠類比CPU和硬盤，既然硬盤這麼慢，咱們就在他們之間加一個緩存。既然JS這麼慢，咱們就在JS和DOM之間加一個緩存。CPU只操做內存，最後把變動寫入硬盤。JS只操做Virtual DOM，最後把變動寫入DOM。

 

其思想的關鍵是：

1.相對於 DOM 對象，原生的JS對象處理起來更快更簡單。

2.比較兩棵DOM樹的差別是 Virtual DOM算法最核心的部分，這也是所謂的Vritual DOM的diff算法。 

 

爲何快不少？

固然若是真的這樣大面積的操做 DOM，性能會是一個很大的問題，因此 React 實現了一個虛擬 DOM，組件 DOM 結構就是映射到這個虛擬 DOM 上，React 在這個虛擬 DOM 上實現了一個 diff 算法，當要更新組件的時候，會經過 diff 尋找到要變動的 DOM 節點，再把這個修改更新到瀏覽器實際的 DOM 節點上，因此實際上不是真的渲染整個 DOM 樹。這個虛擬 DOM 是一個純粹的 JS 數據結構，因此性能會比原生 DOM 快不少