摘要： 什么是虛擬DOM?

• 作者：浪里行舟

Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。

前言

Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍，并大大降低了內(nèi)存消耗。那么，什么是Virtual DOM？為什么需要Virtual DOM？它是通過什么方式去提升頁面渲染效率的呢？這是本文所要探討的問題。

模板轉(zhuǎn)換成視圖的過程

在正式介紹 Virtual Dom之前，我們有必要先了解下模板轉(zhuǎn)換成視圖的過程整個過程（如下圖）：

• Vue.js通過編譯將template 模板轉(zhuǎn)換成渲染函數(shù)(render ) ，執(zhí)行渲染函數(shù)就可以得到一個虛擬節(jié)點樹
• 在對 Model 進行操作的時候，會觸發(fā)對應(yīng) Dep 中的 Watcher 對象。Watcher 對象會調(diào)用對應(yīng)的 update 來修改視圖。這個過程主要是將新舊虛擬節(jié)點進行差異對比，然后根據(jù)對比結(jié)果進行DOM操作來更新視圖。

簡單點講，在Vue的底層實現(xiàn)上，Vue將模板編譯成虛擬DOM渲染函數(shù)。結(jié)合Vue自帶的響應(yīng)系統(tǒng)，在狀態(tài)改變時，Vue能夠智能地計算出重新渲染組件的最小代價并應(yīng)到DOM操作上。

我們先對上圖幾個概念加以解釋:

• 渲染函數(shù)：渲染函數(shù)是用來生成Virtual DOM的。Vue推薦使用模板來構(gòu)建我們的應(yīng)用界面，在底層實現(xiàn)中Vue會將模板編譯成渲染函數(shù)，當(dāng)然我們也可以不寫模板，直接寫渲染函數(shù)，以獲得更好的控制。
• VNode 虛擬節(jié)點：它可以代表一個真實的 dom 節(jié)點。通過 createElement 方法能將 VNode 渲染成 dom 節(jié)點。簡單地說，vnode可以理解成節(jié)點描述對象，它描述了應(yīng)該怎樣去創(chuàng)建真實的DOM節(jié)點。
• patch(也叫做patching算法)：虛擬DOM最核心的部分，它可以將vnode渲染成真實的DOM，這個過程是對比新舊虛擬節(jié)點之間有哪些不同，然后根據(jù)對比結(jié)果找出需要更新的的節(jié)點進行更新。這點我們從單詞含義就可以看出， patch本身就有補丁、修補的意思，其實際作用是在現(xiàn)有DOM上進行修改來實現(xiàn)更新視圖的目的。Vue的Virtual DOM Patching算法是基于Snabbdom的實現(xiàn)，并在些基礎(chǔ)上作了很多的調(diào)整和改進。

Virtual DOM 是什么？

Virtual DOM 其實就是一棵以 JavaScript 對象( VNode 節(jié)點)作為基礎(chǔ)的樹，用對象屬性來描述節(jié)點，實際上它只是一層對真實 DOM 的抽象。最終可以通過一系列操作使這棵樹映射到真實環(huán)境上。

簡單來說，可以把Virtual DOM 理解為一個簡單的JS對象，并且最少包含標(biāo)簽名( tag)、屬性(attrs)和子元素對象( children)三個屬性。不同的框架對這三個屬性的命名會有點差別。

對于虛擬DOM，咱們來看一個簡單的實例，就是下圖所示的這個，詳細(xì)的闡述了模板 → 渲染函數(shù) → 虛擬DOM樹 → 真實DOM的一個過程

Virtual DOM 作用是什么？

虛擬DOM的最終目標(biāo)是將虛擬節(jié)點渲染到視圖上。但是如果直接使用虛擬節(jié)點覆蓋舊節(jié)點的話，會有很多不必要的DOM操作。例如，一個ul標(biāo)簽下很多個li標(biāo)簽，其中只有一個li有變化，這種情況下如果使用新的ul去替代舊的ul,因為這些不必要的DOM操作而造成了性能上的浪費。

為了避免不必要的DOM操作，虛擬DOM在虛擬節(jié)點映射到視圖的過程中，將虛擬節(jié)點與上一次渲染視圖所使用的舊虛擬節(jié)點（oldVnode）做對比，找出真正需要更新的節(jié)點來進行DOM操作，從而避免操作其他無需改動的DOM。

其實虛擬DOM在Vue.js主要做了兩件事：

• 提供與真實DOM節(jié)點所對應(yīng)的虛擬節(jié)點vnode
• 將虛擬節(jié)點vnode和舊虛擬節(jié)點oldVnode進行對比，然后更新視圖

給大家推薦一個好用的BUG監(jiān)控工具Fundebug，歡迎免費試用！

為何需要Virtual DOM？

• 具備跨平臺的優(yōu)勢

由于 Virtual DOM 是以 JavaScript 對象為基礎(chǔ)而不依賴真實平臺環(huán)境，所以使它具有了跨平臺的能力，比如說瀏覽器平臺、Weex、Node 等。

• 操作 DOM 慢，js運行效率高。我們可以將DOM對比操作放在JS層，提高效率。

因為DOM操作的執(zhí)行速度遠(yuǎn)不如Javascript的運算速度快，因此，把大量的DOM操作搬運到Javascript中，運用patching算法來計算出真正需要更新的節(jié)點，最大限度地減少DOM操作，從而顯著提高性能。

Virtual DOM 本質(zhì)上就是在 JS 和 DOM 之間做了一個緩存。可以類比 CPU 和硬盤，既然硬盤這么慢，我們就在它們之間加個緩存：既然 DOM 這么慢，我們就在它們 JS 和 DOM 之間加個緩存。CPU（JS）只操作內(nèi)存（Virtual DOM），最后的時候再把變更寫入硬盤（DOM）

• 提升渲染性能

Virtual DOM的優(yōu)勢不在于單次的操作，而是在大量、頻繁的數(shù)據(jù)更新下，能夠?qū)σ晥D進行合理、高效的更新。

為了實現(xiàn)高效的DOM操作，一套高效的虛擬DOM diff算法顯得很有必要。我們通過patch 的核心----diff 算法，找出本次DOM需要更新的節(jié)點來更新，其他的不更新。比如修改某個model 100次，從1加到100，那么有了Virtual DOM的緩存之后，只會把最后一次修改patch到view上。那diff 算法的實現(xiàn)過程是怎樣的？

diff 算法

Vue的diff算法是基于snabbdom改造過來的，僅在同級的vnode間做diff，遞歸地進行同級vnode的diff，最終實現(xiàn)整個DOM樹的更新。因為跨層級的操作是非常少的，忽略不計，這樣時間復(fù)雜度就從O(n3)變成O(n)。

diff 算法包括幾個步驟：

• 用 JavaScript 對象結(jié)構(gòu)表示 DOM 樹的結(jié)構(gòu)；然后用這個樹構(gòu)建一個真正的 DOM 樹，插到文檔當(dāng)中
• 當(dāng)狀態(tài)變更的時候，重新構(gòu)造一棵新的對象樹。然后用新的樹和舊的樹進行比較，記錄兩棵樹差異
• 把所記錄的差異應(yīng)用到所構(gòu)建的真正的DOM樹上，視圖就更新了

diff 算法的實現(xiàn)過程

diff 算法本身非常復(fù)雜，實現(xiàn)難度很大。本文去繁就簡，粗略介紹以下兩個核心函數(shù)實現(xiàn)流程：

• patch(container,vnode) :初次渲染的時候，將VDOM渲染成真正的DOM然后插入到容器里面。
• patch(vnode,newVnode):再次渲染的時候，將新的vnode和舊的vnode相對比，然后之間差異應(yīng)用到所構(gòu)建的真正的DOM樹上。

1. patch(container,vnode)

通過這個函數(shù)可以讓VNode渲染成真正的DOM，我們通過以下模擬代碼，可以了解大致過程：

function createElement(vnode) {    
var tag = vnode.tag  
var attrs = vnode.attrs || {}    
var children = vnode.children || []    
if (!tag) {       
 return null  
  }    
// 創(chuàng)建真實的 DOM 元素    
var elem = document.createElement(tag)   
 // 屬性    
var attrName    
for (attrName in attrs) {    
    if (attrs.hasOwnProperty(attrName)) { 
           // 給 elem 添加屬性
           elem.setAttribute(attrName, attrs[attrName])
        }
    }
    // 子元素
    children.forEach(function (childVnode) {
        // 給 elem 添加子元素，如果還有子節(jié)點，則遞歸的生成子節(jié)點。
        elem.appendChild(createElement(childVnode))  // 遞歸
    })    // 返回真實的 DOM 元素   
 return elem
}

2. patch(vnode,newVnode)

這里我們只考慮vnode與newVnode如何對比的情況：

function updateChildren(vnode, newVnode) {
    var children = vnode.children || []
    var newChildren = newVnode.children || []
  // 遍歷現(xiàn)有的children
    children.forEach(function (childVnode, index) {
        var newChildVnode = newChildren[index]
  // 兩者tag一樣
        if (childVnode.tag === newChildVnode.tag) {
            // 深層次對比，遞歸
            updateChildren(childVnode, newChildVnode)
        } else { 
  // 兩者tag不一樣
           replaceNode(childVnode, newChildVnode) 
       }
    }
)}

給大家推薦一個好用的BUG監(jiān)控工具Fundebug，歡迎免費試用！

參考

• 5種處理Vue異常的方法
• 深入理解Vue組件3大核心概念
• Fundebug發(fā)布Vue插件，簡化BUG監(jiān)控接入代碼
• Vue開發(fā)入門看這篇文章就夠了

關(guān)于Fundebug

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應(yīng)用實時BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計處理了10億+錯誤事件，付費客戶有陽光保險、核桃編程、荔枝FM、掌門1對1、微脈、青團社等眾多品牌企業(yè)。歡迎大家免費試用！