Virtual DOM的歷史和未來
譯文Virtual DOM最初是由React的作者開創的，目的是使聲明式UI的渲染速度更快。為了理解為什么聲明式UI最初如此緩慢，我們首先需要了解過去是如何做聲明式UI的。
聲明式用戶界面
編寫聲明式UI的傳統方法是更改元素的innerHTML屬性。例如，如果我想向<div>UI添加一個元素到，我將寫如下:
document.body.innerHTML = '<div>Hello World!</div>';
// <body> now has a <div>Hello World!</div> child.
我們可以認識到innerHTML允許我們以聲明地方式定義UI，但它的效率不高。
效率低下源于每次更改用戶界面時的解析、破壞和重建innerHTML，都需要遵循四個步驟：
- 解析innerHTML字符串到DOM節點樹中。
- 移除所有內容<body>元素。
- 將DOM節點樹插入<body>元素。
- 執行布局計算和重繪屏幕。
這個過程在計算上非常昂貴，并且可能導致渲染速度顯著降低。
命令式用戶界面
那么，這個問題是如何解決的呢？那就是選擇使用DOM， 這種方法要比innerHTML方法快3倍。
const div = document.createElement('div');
div.textContent = 'Hello World!';
document.body.appendChild(div);
然而，我們可以認識到，手動編寫這個可能很麻煩，特別是當UI中有很多交互時，因為我們需要命令式地指定每個步驟。以聲明的方式編寫UI要優雅得多。
不過，React作者創建了VirtualDOM，允許我們以一種比innerHTML更快的呈現方式編寫UI，而且是聲明式的。
理解VirtualDOM
為了最好地了解VirtualDOM是如何工作的，讓我們概述一下流程，然后構建一個示例。
VirtualDOM是一種呈現UI的方法。該方法利用模仿DOM樹的JavaScript對象樹(“虛擬”節點)。
// <div>Hello World!</div>
const div = document.createElement('div');
div.style = 'color: red';
div.textContent = 'Hello World!';
以上<div> 被模仿為以下JavaScript對象中的虛擬節點：
const divVNode = {
type: 'div',
props: {
style: 'color: red'
}
children: ['Hello World!']
};
我們可以注意到虛擬節點有三個屬性:
- tag：將元素的標記名稱存儲為字符串。
- props：將元素的屬性和屬性存儲為對象。
- children：將元素的虛擬節點子級存儲為數組。
使用虛擬節點，我們可以對當前的UI進行建模，以及當我們更新UI時希望它改變成什么。
假設我想將<div>中的文本從 "Hello World!" 更改成 "Hello Universe!"。可以使用DOM進行強制修改：
// <div>Hello World!</div>
const div = document.createElement('div');
div.style = 'color: red';
div.textContent = 'Hello World!';
// Change from "Hello World!" to "Hello Universe!"
div.textContent = 'Hello Universe!';
但是使用VirtualDOM，我可以指定當前UI的外觀（舊虛擬節點）和我希望它的外觀（新虛擬節點）。
const oldVNode = {
type: 'div',
props: {
style: 'color: red'
}
children: ['Hello World!']
};
const newVNode = {
type: 'div',
props: {
style: 'color: red'
}
children: ['Hello Universe!']
};
然而要讓Virtual DOM真正將更改應用到UI，還需要計算舊虛擬節點和新虛擬節點之間的差異。
{
type: 'div',
props: {
style: 'color: red'
}
- children: ['Hello World!']
+ children: ['Hello Universe!']
};
當我們知道了二者之間的差別，就可以通過Virtual DOM改變UI。
div.replaceChild(newChild, oldChild);
Virtual DOM只是進行了必要的修改，并不是替換了整個UI。
構建自己的Virtual DOM
在本文中，我們將模仿Million.js的 Virtual DOM API。我們的API將包含三個主要功能：m, createElement, and patch。
m (tag, props, children)
m 函數是創建虛擬節點的輔助函數。虛擬節點包含三個屬性：
- tag：將虛擬節點的名稱標記為字符串；
- props：作為對象的節點的屬性/屬性；
- children：虛擬節點的子節點作為數組。
m幫助程序函數的示例實現如下：
const m = (tag, props = {}, children = []) => ({
tag,
props,
children,
});
這樣創建虛擬節點就簡單多了。
m('div', { style: 'color: red' }, ['Hello World!']);
#createElement(vnode)
該createElement函數將虛擬節點轉換為真實的DOM元素。這很重要，因為我們將在patch函數中使用它。
實現如下:
- 如果虛擬節點是文本，則返回文本節點；
- tag使用虛擬節點的屬性創建一個新的DOM節點；
- 遍歷虛擬節點props 并將它們添加到DOM節點。
- 遍歷children，在每個子級上遞歸調用createElement并將其添加到DOM節點。
const createElement = (vnode) => {
if (typeof vnode === 'string') {
return document.createTextNode(vnode);
}
const el = document.createElement(vnode.tag);
for (const prop in vnode.props) {
el[prop] = vnode.props[prop];
}
for (const child of vnode.children) {
el.appendChild(createElement(child));
}
return el;
};
這樣就可以輕松地將虛擬節點轉變成DOM節點。
// <div style="color: red">Hello World!</div>
createElement(
m('div', { style: 'color: red' }, ['Hello World!'])
);
#patch(el, newVNode, oldVNode)
該patch函數采用現有的DOM節點、舊的虛擬節點和新的虛擬節點。
實現如下:
- 計算兩個虛擬節點之間的差異；
- 如果虛擬節點是字符串，則將DOM節點的文本內容替換為新節點；
- 如果虛擬節點是對象，且tag、props、 children不同，則更新節點。
const patch = (el, newVNode, oldVNode) => {
if (!newVNode && newVNode !== '') return el.remove();
if (
typeof oldVNode === 'string' ||
typeof newVNode === 'string'
) {
if (oldVNode !== newVNode) {
return el.replaceWith(createElement(newVNode));
}
} else {
if (oldVNode.tag !== newVNode.tag) {
return el.replaceWith(createElement(newVNode));
}
// patch props
for (const prop in {
...oldVNode.props,
...newVNode.props,
}) {
if (newVNode.props[prop] === undefined) {
delete el[prop];
} else if (
oldVNode.props[prop] === undefined ||
oldVNode.props[prop] !== newVNode.props[prop]
) {
el[prop] = newVNode.props[prop];
}
}
// patch children
for (let i = oldVNode.children.length - 1; i >= 0; --i) {
patch(
el.childNodes[i],
newVNode.children[i],
oldVNode.children[i]
);
}
for (
let i = oldVNode.children.length;
i < newVNode.children.length;
i++
) {
el.appendChild(createElement(newVNode.children[i]));
}
}
};
這樣就可以使用patch功能更新UI了。
const oldVNode = m('div', { style: 'color: red' }, [
'Hello World!',
]);
const newVNode = m('div', { style: 'color: red' }, [
'Hello Universe!',
]);
const el = createElement(oldVNode);
// <div style="color: red">Hello World!</div>
patch(el, oldVNode, newVNode);
// <div style="color: red">Hello Universe!</div>
Virtual DOM是純開銷
當前，Virtual DOM實現在計算新舊虛擬節點之間的差異時會產生計算成本。
即使使用非常有效的差分算法 (如list-diff2)，當虛擬節點樹大于虛擬節點的兩位數時，差異成本也會變得顯著。
樹區分算法是出了名的慢。時間復雜度可以從O(n)轉O(n ^ 3)取決于虛擬節點樹的復雜性。這與DOM操縱相去甚遠，后者是O(1)。
Virtual DOM的未來
編譯器是新框架”-- 湯姆·戴爾
Ember的創建者湯姆是最早倡導為JavaScript UI庫使用編譯器開源狂熱者之一。
現在，我們知道湯姆的賭注是正確的。JavaScript生態系統見證了Solid、Svelte等“已編譯”庫的興起，它們放棄了Virtual DOM。這些庫使用編譯器預渲染，并在使用時生成代碼來跳過不必要的渲染。
另一方面，Virtual DOM落后于這一趨勢。當前的虛擬DOM庫本質上與“按需” 編譯器不兼容。因此，Virtual DOM的渲染速度通常是比現代“No Virtual DOM” UI庫慢幾個數量級。
如果我們希望Virtual DOM在未來的渲染速度上具有競爭力，那就需要重新設計Virtual DOM以允許編譯器增強。
