你不知的DOM編程

前言：隨着vue，react, angular的流行，可能如今咱們沒必要常常的操做DOM，三大框架在副交互的操做中發揮着極大地優點。由於咱們知道用腳本對DOM的操做很是昂貴，本文主要探討常規的DOM操做中你可能不知道的知識。

瀏覽器中的DOM

首先，咱們來了解一下什麼是DOM，他爲何慢？

DOM，天生就慢

文檔對象模型 （DOM）是 W3C（萬維網聯盟）的標準，是一個獨立於語言的，用於操做XML和HTML文檔的程序接口。在瀏覽器中，主要和HTML文檔打交道，儘管DOM是個與語言無關的API，可是它在瀏覽器中的接口倒是用JS實現的。可是一般瀏覽器會把DOM和JS分開來實現，好比Chrome中的DOM實現爲webkit中的webCore，但js引擎是Google本身研發的V8。既然分開了，一旦二者須要產生鏈接，就要付出代價。

DOM 訪問與修改

前面說到JS訪問DOM會產生而性能上的消耗，若是去修改DOM元素則代價更爲昂貴，由於它會致使瀏覽器從新計算頁面的幾何變化。 來看兩端段代碼：

第一段代碼定義了一個普通的變量，進行循環累加，執行事件幾乎爲。第二段代碼，每次循環會訪問兩次特定的元素：第一次讀取這個元素的innerHTML屬性，第二次重寫它。能夠看到它的執行時間將近2.8s，這段腳本會一直阻塞後續的執行。
看清楚了這一點，不可貴到一個效率更高的版本：

用一個局部變量包層每次更新後的內容，等待循環結束後，一次性的寫入頁面（儘量的把更多的工做交給js的部分來作）。能夠看到快了近2000倍。
顯而易見。訪問DOM的次數越多，代碼的運行速度越慢，所以，通用的經驗作法是：減小訪問DOM的次數，把運算儘可能留給JS處理。這也是Vue或者React爲何要設計virtual dom 的初衷之一：把負責的DOM模型映射成JS對象，不去直接操做DOM而是經過操做JS對象，最後再進行 innerHtml 或者 append。

HTML 集合

咱們先來看一段代碼：

var alldivs = document.getElementsByTagName('div');  
for (var i = 0; i < alldivs.length; i++){  
    document.body.appendChild(document.createElement('div'));  
}

乍一看，這段代碼只是單純的把頁面中的div數量翻倍：遍歷全部的div，每次建立一個新的div並建立到添加到body中。
但事實上，這是一個死循環：由於循環的退出條件alldivs.length在每一次循環結束後都會增長，由於這個HTML元素集合反映的是底層文檔元素的實時狀態。 相似於下面的HTML集合其實都會存在這樣的問題：

1. document.getElementsByTagName()
2. document.getElementsByClassName()
3. document.getElementsByName()
   ....

其次上面的代碼也會存在一個性能問題，就是每次都須要訪問DOM對象的length屬性。其實咱們也能夠用一個變量緩存起來對象的length屬性：

var len = document.getElementsByTagName('div').length;  
for (var i = 0; i < len; i++){  
    document.body.appendChild(document.createElement('div'));  
}

重繪與重排

瀏覽器用來顯示頁面的全部「組件」，有：HTML標籤、js、css、圖片——以後會解析並生成兩個內部的數據結構：

DOM樹（表示頁面結構）
渲染樹（表示DOM節點應該如何表示）
DOM樹中的每個須要顯示的節點在渲染樹中至少存在一個對應的節點。
渲染樹中的節點被稱爲「幀（frames）」或「盒（boxes）」，符合css盒模型的定義，理解頁面元素爲一個具備padding、margin、borders和position的盒子。
一旦渲染樹構建完成，瀏覽器就開始顯示頁面元素，這個過程稱爲繪製（paint）。

當DOM的變化影響了元素的幾何屬性（寬、高）——好比改變改變了邊框的寬度或者給一個段落增長一些文字致使其行數的增長——瀏覽器就須要從新計算元素的幾何屬性，一樣，頁面中其餘元素的幾何屬性和位置也會所以受到影響。
瀏覽器會使渲染樹中收到影響的部分消失，從新構建渲染樹，這個過程稱爲「重排(reflow)」。重排完成以後，瀏覽器會從新將受到影響的部分繪製到瀏覽器中，這個過程稱之爲「重繪(repaint)」。

若是改變的不是元素的幾何屬性，如：改變元素的背景顏色，不會發生重排，只會發生一次重繪，由於元素的佈局並無改變。
不論是重繪仍是重排，都是代價昂貴的操做，它們會致使web應用程序的UI反應遲鈍，應當儘量的減小這類過程的發生。
重排什麼時候發生？

• 添加或刪除可見的DOM元素
• 元素位置的改變
• 元素尺寸的改變（padding、margin、border、height、width）
• 內容改變（文本改變或圖片尺寸改變）
• 頁面渲染器初始化
• 瀏覽器窗口尺寸改變
• 滾動條的出現（會觸發整個頁面的重排）

最小化重繪和重排

改變樣式

一個栗子：

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

示例中，元素的三個樣式被改變，並且每個都會影響元素的幾何結構。在最糟糕的狀況下，這段代碼會觸發三次重排（大部分現代瀏覽器爲此作了優化，只會觸發一次重排）。從另外一個角度看，這段代碼四次訪問DOM，能夠被優化。

var el = document.getElementById('mydiv');  
//思路：合併全部改變而後一次性處理  
//method_1:使用cssText屬性  
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px';  
  
//method_2:修改類名  
el.className = 'anotherClass';

批量修改DOM

當你須要對DOM元素進行一系列操做的時候，不妨按照以下步驟：

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

上面的這一套組合拳中，第一步和第三部分別會觸發一次重排。可是若是你忽略了這兩個步驟，那麼在第二步所產生的任何修改都會觸發一次重排。

在此安利三種可使DOM元素脫離文檔流的方法：

1. 隱藏元素
2. 使用文檔片斷（document fragment）在當前DOM以外構建一個子樹，再把它拷貝迴文檔
3. 將原始元素拷貝到一個脫離文檔的節點中，修改副本，完成後再替換原始元素

讓動畫元素脫離文檔流

通常狀況下，重排隻影響渲染樹中的一小部分，但也可能影響很大的一部分，甚至是整個渲染樹。
瀏覽器所需的重排次數越少，應用程序的響應速度也就越快。
想象這樣一種狀況，頁面的底部有一個動畫，會推移頁面整個餘下的部分，這將是一次代價昂貴的大規模重排！用戶也勢必會感受到頁面一卡一卡的。
所以，使用如下步驟能夠避免頁面中的大部分重排：

1. 使用絕對定位讓頁面上的動畫元素脫離文檔流
2. 動畫展現階段
3. 動畫結束時，將元素恢復定位。

IE的:hover

從IE7開始，IE容許在任何元素上使用:hover這個css選擇器。
然而，若是你有大量元素使用了:hover，你會發現，賊喇慢！

關於

做者：monkeyWang

本人主頁：https://monkeywangs.github.io/

微信公衆號：會不按期推送前端技術文章，歡迎關注