在Web開發中，需要將數據的變化實時反映到UI上，這時就需要對DOM進行操作，但是復雜或頻繁的DOM操作通常是性能瓶頸產生的原因，為此，React引入了虛擬DOM（Virtual DOM）的機制。
一、什么是虛擬DOM？
在React中，render執行的結果得到的並不是真正的DOM節點，結果僅僅是輕量級的JavaScript對象，我們稱之為virtual DOM。
虛擬DOM是React的一大亮點，具有batching(批處理)和高效的Diff算法。這讓我們可以無需擔心性能問題而”毫無顧忌”的隨時“刷新”整個頁面，由虛擬 DOM來確保只對界面上真正變化的部分進行實際的DOM操作。在實際開發中基本無需關心虛擬DOM是如何運作的，但是理解其運行機制不僅有助於更好的理解React組件的生命周期，而且對於進一步優化 React程序也會有很大幫助。
二、虛擬DOM VS 直接操作原生DOM？
如果沒有 Virtual DOM，簡單來說就是直接重置 innerHTML。這樣操作，在一個大型列表所有數據都變了的情況下，還算是合理，但是，當只有一行數據發生變化時，它也需要重置整個 innerHTML，這時候顯然就造成了大量浪費。
比較innerHTML 和Virtual DOM 的重繪過程如下：
innerHTML: render html string + 重新創建所有 DOM 元素
Virtual DOM: render Virtual DOM + diff + 必要的 DOM 更新
和 DOM 操作比起來，js 計算是非常便宜的。Virtual DOM render + diff 顯然比渲染 html 字符串要慢，但是，它依然是純 js 層面的計算，比起后面的 DOM 操作來說，依然便宜了太多。當然，曾有人做過驗證說React的性能不如直接操作真實DOM，代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function Raw() {
var data = _buildData(),
html = "";
...
for(var i=0; i<data.length; i++) {
var render = template;
render = render.replace("{{className}}", "");
render = render.replace("{{label}}", data[i].label);
html += render;
}
...
container.innerHTML = html;
...
}
|
該測試用例中雖然構造了一個包含1000個Tag的String，並把它添加到DOM樹中，但是只做了一次DOM操作。然而，在實際開發過程中，這1000個元素更新可能分布在20個邏輯塊中，每個邏輯塊中包含50個元素，當頁面需要更新時，都會引起DOM樹的更新，上述代碼就近似變成了如下格式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function Raw() {
var data = _buildData(),
html = "";
...
for(var i=0; i<data.length; i++) {
var render = template;
render = render.replace("{{className}}", "");
render = render.replace("{{label}}", data[i].label);
html += render;
if(!(i % 50)) {
container.innerHTML = html;
}
}
...
}
|
這樣來看，React的性能就遠勝於原生DOM操作了。
React.js 相對於直接操作原生DOM有很大的性能優勢， 很大程度上都要歸功於virtual DOM的batching 和diff。batching把所有的DOM操作搜集起來，一次性提交給真實的DOM。diff算法時間復雜度也從標准的的Diff算法的O(n^3)降到了O(n)。這里留到下一次博客單獨講。
三、虛擬DOM VS MVVM？
- 臟檢查：scope digest + 必要 DOM 更新
- 依賴收集：重新收集依賴 + 必要 DOM 更新
可以看到，Angular 最不效率的地方在於任何小變動都有的和 watcher 數量相關的性能代價。但是！當所有數據都變了的時候，Angular 其實並不吃虧。依賴收集在初始化和數據變化的時候都需要重新收集依賴，這個代價在小量更新的時候幾乎可以忽略，但在數據量龐大的時候也會產生一定的消耗。
MVVM 渲染列表的時候，由於每一行都有自己的數據作用域，所以通常都是每一行有一個對應的 ViewModel 實例，或者是一個稍微輕量一些的利用原型繼承的 "scope" 對象，但也有一定的代價。所以，MVVM 列表渲染的初始化幾乎一定比 React 慢，因為創建 ViewModel / scope 實例比起 Virtual DOM 來說要昂貴很多。這里所有 MVVM 實現的一個共同問題就是在列表渲染的數據源變動時，尤其是當數據是全新的對象時，如何有效地復用已經創建的 ViewModel 實例和 DOM 元素。假如沒有任何復用方面的優化，由於數據是 “全新” 的，MVVM 實際上需要銷毀之前的所有實例，重新創建所有實例，最后再進行一次渲染！這就是為什么題目里鏈接的 angular/knockout 實現都相對比較慢。相比之下，React 的變動檢查由於是 DOM 結構層面的，即使是全新的數據，只要最后渲染結果沒變，那么就不需要做無用功。
Angular 和 Vue 都提供了列表重繪的優化機制，也就是 “提示” 框架如何有效地復用實例和 DOM 元素。比如數據庫里的同一個對象，在兩次前端 API 調用里面會成為不同的對象，但是它們依然有一樣的 uid。這時候你就可以提示 track by uid 來讓 Angular 知道，這兩個對象其實是同一份數據。那么原來這份數據對應的實例和 DOM 元素都可以復用，只需要更新變動了的部分。或者，你也可以直接 track by $index 來進行 “原地復用”：直接根據在數組里的位置進行復用。在題目給出的例子里，如果 angular 實現加上 track by $index 的話，后續重繪是不會比 React 慢多少的。甚至在 dbmonster 測試中，Angular 和 Vue 用了 track by $index 以后都比 React 快: dbmon (注意 Angular 默認版本無優化，優化過的在下面）
在比較性能的時候，要分清楚初始渲染、小量數據更新、大量數據更新這些不同的場合。Virtual DOM、臟檢查 MVVM、數據收集 MVVM 在不同場合各有不同的表現和不同的優化需求。Virtual DOM 為了提升小量數據更新時的性能，也需要針對性的優化，比如 shouldComponentUpdate 或是 immutable data。
- 初始渲染：Virtual DOM > 臟檢查 >= 依賴收集
- 小量數據更新：依賴收集 >> Virtual DOM + 優化 > 臟檢查（無法優化） > Virtual DOM 無優化
- 大量數據更新：臟檢查 + 優化 >= 依賴收集 + 優化 > Virtual DOM（無法/無需優化）>> MVVM 無優化
（該段落借鑒了知乎的相關回答）
四、對React虛擬DOM的誤解？
React 從來沒有說過 “React 比原生操作 DOM 快”。React給我們的保證是，在不需要手動優化的情況下，它依然可以給我們提供過得去的性能。
原創文章轉載請注明：
轉載自AlloyTeam：http://www.alloyteam.com/2015/10/react-virtual-analysis-of-the-dom/