虚拟DOM:为什么React-Vue比直接操作DOM快

#一、一个让我加班到凌晨的性能问题

去年优化公司后台管理系统时，我遇到个诡异现象：页面上有个超长的表格，每次筛选都要卡顿3-4秒。我本能地用jQuery直接操作DOM重渲染，结果性能更差了…

直到我把代码改成React+虚拟DOM，性能直接提升8倍！今天就来揭秘这个"前端性能加速器"的工作原理。

#二、虚拟DOM是什么？

用大白话说：虚拟DOM就是真实DOM的"轻量级替身" 。它本质上是JS对象，保存着节点类型、属性和子元素等信息。

复制const vNode = {
  type: 'div',
  props: { 
    className: 'box',
    children: [
      { type: 'h1', props: { children: '标题' } },
      { type: 'p', props: { children: '内容' } }
    ]
  }
}

与传统DOM操作对比：

#三、核心工作原理：diff算法

#1. 创建虚拟DOM树

每次组件更新时，会生成新的虚拟DOM树

复制function 我的组件() {
  const [count, setCount] = useState(0)
  return (
    <div className="card">  // ← 这里会生成虚拟DOM
      <button onClick={() => setCount(count + 1)}>
        点击{count}次
      </button>
    </div>
  )
}

#2. Diff比较过程（核心三原则）

• 同级比较：只比较同层级节点，不跨级（复杂度从O(n³)降到O(n)）
• 类型不同直接替换：比如div变成span
• key值优化：用key标识相同元素（详见我上篇key的文章）

#3. 最小化更新（patch）

复制function updateDOM(oldVNode, newVNode) {
  if (oldVNode.type !== newVNode.type) {
    
    replaceNode(oldVNode, newVNode)
  } else {
    
    updateAttributes(oldVNode, newVNode)
    
    diffChildren(oldVNode.children, newVNode.children)
  }
}

#四、性能优化的秘密

#1. 批量更新

虚拟DOM会把多次修改合并成一次更新（类似快递攒一波再发货）

#2. 跳过不变部分

通过shouldComponentUpdate/PureComponent/memo等避免不必要的diff

#3. 真实案例对比

我重构的表格组件性能数据：

#五、常见误区

❌ 误区1：虚拟DOM比原生DOM快
错！虚拟DOM只是在复杂场景下更高效，简单操作肯定直接DOM更快

❌ 误区2：不用学DOM了
大错特错！遇到性能瓶颈时，依然需要操作DOM（比如虚拟滚动）

✅ 正确认知：
虚拟DOM是在开发效率与运行时性能之间找到的完美平衡点

#六、手写极简虚拟DOM（面试常考）

复制function createElement(type, props, ...children) {
  return { type, props: { ...props, children } }
}


function render(vNode) {
  if (typeof vNode === 'string') {
    return document.createTextNode(vNode)
  }
  
  const node = document.createElement(vNode.type)
  Object.entries(vNode.props || {})
    .filter(([key]) => key !== 'children')
    .forEach(([key, value]) => {
      node[key] = value
    })

  if (vNode.props.children) {
    vNode.props.children.forEach(child => {
      node.appendChild(render(child))
    })
  }
  return node
}


const vDom = createElement('div', { className: 'header' }, 
  createElement('h1', null, 'Hello'),
  createElement('p', null, 'Virtual DOM')
)
document.body.appendChild(render(vDom))

#七、总结

虚拟DOM三大核心价值：

1. 开发效率：让开发者专注于数据逻辑
2. 跨平台：同一套代码可渲染到Web/Native（React Native）
3. 性能保障：在复杂交互场景下保持流畅

适合使用场景：

• 频繁更新的后台系统
• 复杂交互的中台应用
• 需要跨端的移动应用​