Javascript的DOM操做 - 你真的瞭解嗎?

    前言

    在前端開發的過程當中,javascript極爲重要的一個功能就是對DOM對象的操做,不管增刪改查在前端頁面操做這一範圍內都是比較消耗性能的.如何高效率的,便捷的操做DOM,這就是本文要講述的.但願看徹底文,你能知道如何更高效的經過原生js以及jQuery操做DOM元素.

    操做DOM

    這裏我但願介紹的相對系統一點,而不是東一句西一句,因此把Javascript和jQuery經常使用操做DOM的內容概括成思惟導圖方便閱讀.這裏就總結出最基本最經常使用的DOM操做.

    Javascript:

    jQuery:

    上面的思惟導圖分別是javascript和jQuery下操做DOM的一些經常使用Function,並不徹底我僅僅列出相對經常使用的.這裏我比較推薦的是jQuery的操做方式,更加便捷的同時在性能上也相對有所保障.

    性能影響

    DOM操做會致使最重要的,也是咱們最須要的問題就是致使用戶阻塞的重構(reflow)和重繪(repaint).比較通俗的一句話就是你在頁面上的任何操做都是有代價的,有些大有些小,若是咱們的操做比較頻繁或者波及範圍較大,那麼就要講究方式和技巧.reflow和repaint就是咱們在改變頁面或者說操做DOM時,會帶來的兩種後果.

    reflow意味着結構的改變,好比一堆元素堆疊,改變其中一個的寬高,那麼相應的全部元素的位置都要改變.repaint意味着樣式的改變好比div調整了背景色等,可是位置不變,只改變咱們操做的元素.因此一般來看repaint的代價要遠小於reflow,速度也更快.

    影響性能的因素咱們已經知道了,那麼下面看一下怎麼避免.

    更有效的操做

    最重要的觀點:既然任何DOM操做都有代價,那麼最好就是不操做或者最少的操做DOM.因此首先記住一個原則,將DOM操做盡可能少!這裏有我認爲主要的4個原則,記下來足以應付大多數狀況.

    (1) 能放到DOM操做以外的操做就放到外面,DOM操做要儘可能少.

    DOM操做優化中這一觀點在網上已經很普及了,不少例子都有好比遍歷一個數組而後逐漸把內容添加到DOM上,這裏就推薦先遍歷完數組,而後一次性在DOM上操做.你們能夠看代碼:

// 很差的作法
for (var i=0; i < items.length; i++){
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Option " + i);
    list.appendChild(item);
}   


// 更好的作法
// 使用容器存放臨時變動， 最後再一次性更新DOM
var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Option " + i);
    fragment.appendChild(item);
}
list.appendChild(fragment);

    (2) 大範圍操做先把容器隱藏,在其中操做完成後,再顯示.

    這是一個我剛接觸前端時遇到的一個優化辦法,當時很不理解爲何display=none以後操做就算是性能優化了.可是數據證實如此渲染確實快了不少,這個的原理要涉及到瀏覽器加載和渲染的原理,簡單說就是隱藏的元素其中不會產生reflow.這個例子我就不寫了,很簡單.

    (3) 樣式操做不要注意修改屬性,直接替換class

    這個仍是比較容易理解的,你逐一修改要訪問不少次,而替換class就至關於批量操做了,訪問一次DOM就能夠了,固然性能提升了.

    (4) 用變量保存DOM對象而不是屢次獲取,同時減小操做DOM屬性的次數.

//很差

function addAnchor(parentElement, anchorText, anchorClass) {
  var element = document.createElement('a');
  parentElement.appendChild(element);
  element.innerHTML = anchorText;
  element.className = anchorClass;
}


//更好

function addAnchor(parentElement, anchorText, anchorClass) {
  var element = document.createElement('a');
  element.innerHTML = anchorText;
  element.className = anchorClass;
  parentElement.appendChild(element);
}

    總結

    說到這裏DOM的操做就差很少了,其實沒有什麼太新鮮的內容只是作了一個系統點總結.對於性能這部分要平時積累這個意識,由於大多數時候它在開發過程當中體現的並不明顯.本文還有不少不足,但願你們留言溝通吧.