Virtual DOM是指一个虚拟的DOM树,它是虚拟的节点和属性的集合,是对真实DOM的一种抽象。Virtual DOM的作用是为了实现高效的DOM操作,通过比较虚拟的DOM树与之前的DOM树的差异,可以最小程度的更新DOM树,从而提高Web应用的性能和响应速度。

而非Virtual DOM的改动方式一般是先将旧的DOM删除,再重新渲染新的DOM,有些场景下会产生大量的DOM操作和重绘,导致页面卡顿或性能问题,实际开发中一般通过框架,如React、Vue、Angular等来实现 Virtual DOM。

示例代码:

// 创建Virtual DOM
const el = (
  <div>
    <h1>Hello world</h1>
  </div>
);

// 渲染到真实DOM
ReactDOM.render(el, document.getElementById('root'));