前言

Vue和React的Render函數(shù)中都涉及到了Virtual DOM的概念，Virtual DOM也是性能優(yōu)化上的重要一環(huán)，同時突破了直接操作真實DOM的瓶頸，本文帶著以下幾個問題來闡述Virtual DOM。

1.為什么要操作虛擬 DOM?

2.什么是虛擬 DOM?

3.手把手教你實現(xiàn)虛擬 DOM 渲染真實 DOM

希望閱讀本文之后，能夠讓你深入的了解虛擬 DOM并且在開發(fā)和面試中收益。

為什么要操作虛擬 DOM

為了幫助我們更好的理解為什么要操作虛擬 DOM，我們先從瀏覽器渲染[1]一個 HTML 文件需要做哪些事情說起：

瀏覽器渲染機制大致可以分為以下 5 步走:

1.創(chuàng)建 DOM tree

2.創(chuàng)建 Style Rules

3.構建 Render tree

4.布局 Layout

5.繪制 Painting

我們過去使用原生JavaScript和jquery去操作真實DOM的時候,瀏覽器會從構建 DOM🌲 開始從頭到尾的執(zhí)行一遍渲染的流程。

在一次開發(fā)中,假如產品告訴你一個需求,你需要在一次操作中更新10個DOM節(jié)點,理想狀態(tài)是瀏覽器一次性構建完DOM樹，再執(zhí)行后續(xù)操作。但瀏覽器沒這么智能，收到第一個更新 DOM 請求后，并不知道后續(xù)還有9次更新操作，因此會馬上執(zhí)行流程，最終執(zhí)行 10 次流程。

過了一會產品經理把你叫過去和你說把需求改一下,此時你又需要操作一次 DOM 的更新，那么這個時候之前做的 10 次 DOM 操作就是白白浪費性能,浪費感情。

即使計算機硬件一直在更新迭代，但是操作DOM的代價仍舊是昂貴的，頻繁操作 DOM 還是會出現(xiàn)頁面卡頓，影響用戶的體驗。真實的 DOM 節(jié)點，哪怕一個最簡單的 div 也包含著很多屬性，可以打印出來直觀感受一下：

如此多的屬性，如果每次對 DOM 結構都進行更新，一次，兩次，三次...一百次....一千次...，可想而知，是多么龐大的數(shù)據量。

因此虛擬DOM就是為了解決這個瀏覽器性能問題而被設計出來的。例如前面的例子，假如一次操作中有 10 次更新 DOM 的動作，虛擬DOM不會立即操作DOM，而是將這 10 次更新 DOM 的動作通過Diff算法最終生成一個js對象，然后通知瀏覽器去執(zhí)行一次繪制工作，這樣可以避免大量的無謂的計算量。

什么是虛擬 DOM

虛擬 DOM[2]就是我們上面所說的js對象。

其本質上就是在JS和DOM之間做了一個緩存?？梢灶惐?CPU 和硬盤，既然硬盤這么慢，我們就在它們之間加個緩存：既然 DOM 這么慢，我們就在它們 JS 和 DOM 之間加個緩存。CPU(JS)只操作內存(Virtual DOM)，最后的時候再把變更寫入硬盤(DOM)，直接操作內存中的 JS 對象的速度顯然要更快。

function vnode(tag, data, key, children, text) { 
    return { 
        tag, 
        data, 
        key, 
        children, 
        text 
    } 
} 

舉個栗子:

假如我們有這樣的一個 DOM 樹

<ul class="list"> 
  <li class="item">前端簡報</li> 
  <li>vue</li> 
</ul> 

 那么，我們怎么用 js 的對象來對應到這個樹呢?

{ 
    tag: 'ul',        // 元素標簽 
    data: {           // 屬性 
        class: 'list' 
    }, 
    key: '', 
    text: '',  // 文本內容 
    children: [ 
        { 
            tag: "li", 
            data: { 
                class: "item" 
            }, 
            key: '', 
            text: '', 
            children: [ 
                { 
                    tag: undefined, 
                    data: undefined, 
                    key: undefined, 
                    text: '前端簡報', 
                    children: [] 
                } 
            ] 
        }, 
        { 
            tag: "li", 
            data: "", 
            key: '', 
            text: '', 
            children: [ 
                { 
                    tag: undefined, 
                    data: undefined, 
                    key: undefined, 
                    text: 'vue', 
                    children: [] 
                } 
            ] 
        } 
    ]       // 子元素 
} 

由此可知:DOM tree的信息都可以用JavaScript對象來表示，反過來，我們也可以用 JavaScript對象表示的樹結構來構建一棵真正的DOM樹。

實現(xiàn)虛擬 DOM 渲染真實 DOM

有了JavaScript對象之后如何轉化為真實的 DOM 樹結構呢?

ul 和 li 在 js 對象中,頁面上并沒有此結構，所以我們需要把ul和li轉化為和

標簽

而文本標簽我們定義 Vnode 為:

{ 
   tag: undefined, 
   data: undefined, 
   key: undefined, 
   text: 'vue', 
   children: [] 
} 

故可以判斷tag的類型來確定創(chuàng)建元素的類型.

function createElm(vnode) { 
    let { tag, data, children, key, text } = vnode; 
 
    if (typeof tag == "string") { 
        vnode.el = document.createElement(tag);  //創(chuàng)建元素放到vnode.el上 
        children.forEach(child => { 
            vnode.el.appendChild(createElm(child)) 
        }) 
    } else { 
        vnode.el = document.createTextNode(text);  //創(chuàng)建文本 
    } 
    return vnode.el 
} 

如果子節(jié)點存在并且也是虛擬DOM的話，我們通過遞歸調用創(chuàng)建子節(jié)點。

創(chuàng)建 DOM 樹結構之后我們需要設置節(jié)點的屬性，即處理虛擬 DOM 中的data屬性。

function updateProperties(vnode) { 
    let el = vnode.el; 
    let newProps = vnode.data || {}; 
    for (let key in newProps) { 
        if (key == "style") { 
            for (let styleName in newProps.style) { 
                el.style[styleName] = newProps.style[styleName]; 
            } 
        } else if (key == "class") { 
            el.className = newProps.class; 
        } else { 
            el.setAttribute(key, newProps[key]); 
        } 
    } 
} 

在我們創(chuàng)建元素標簽之后調用updateProperties方法即可

把上面創(chuàng)建出來的真實 DOM 結構 vnode.el 添加到文檔當中即可呈現(xiàn)出我們需要的真實 DOM 結構

let parentElm = document.getElementById("app").parentNode; 獲取之前app的父親body 
parentElm.insertBefore(createElm(vnode), document.getElementById("app").nextSibling); //body里在老的app后面插入真實dom 
parentElm.removeChild(document.getElementById("app")); //刪除老的節(jié)點 

總結

以上就是本文的全部內容,我想我們現(xiàn)在應該了解什么是虛擬DOM的概念了以及虛擬DOM是如何實現(xiàn)真實DOM渲染的。其中用到了主要用到了子節(jié)點的遞歸，下篇文章將講解虛擬節(jié)點的 diff 算法，敬請期待。

參考資料
[1]虛擬DOM介紹: https://www.jianshu.com/p/616999666920

[2]如何實現(xiàn)一個 Virtual DOM 算法: 'https://github.com/livoras/blog/issues/13'

【編輯推薦】