首页 > 文章 > 前端

虚拟DOM原理：手写简单JS框架解析

时间：2025-11-09 17:35:32 109浏览收藏

**虚拟DOM原理详解：用JS实现简单框架，提升前端性能**。想要深入了解虚拟DOM吗？本文将带你一步步用JavaScript实现一个极简的虚拟DOM框架，揭秘其核心原理。虚拟DOM通过JS对象描述DOM结构，利用高效的diff算法对比新旧节点差异，只更新变化部分，避免频繁操作真实DOM，从而显著提升页面渲染效率。文章将详细介绍如何使用`h`函数创建虚拟节点(vnode)，通过`render`函数将其渲染成真实DOM，以及利用`patch`函数比较新旧vnode并高效更新DOM。通过实例代码，让你轻松理解虚拟DOM的工作机制，为前端性能优化打下坚实基础。

虚拟DOM核心是用JS对象描述DOM结构，通过diff算法对比新旧节点，仅更新变化部分以提升性能。先用h函数创建vnode，再通过render函数将其渲染为真实DOM；当数据变化时，patch函数比较新旧vnode，复用相同节点，替换或修改差异部分，实现高效更新。该机制避免频繁操作真实DOM，显著提升渲染效率。

使用JavaScript实现一个简单的虚拟DOM_js框架原理

虚拟DOM的核心思想是用JavaScript对象来描述真实DOM结构，通过对比新旧虚拟DOM的差异，只更新发生变化的部分，从而提升页面渲染性能。下面是一个极简的虚拟DOM实现，帮助理解其基本原理。

1. 创建虚拟DOM节点（vnode）

我们先定义一个h函数，用于创建描述DOM结构的JavaScript对象：

function h(tag, props, children) {
  return {
    tag,
    props,
    children: Array.isArray(children) ? children : [children]
  };
}

这个函数返回一个包含标签名、属性和子节点的对象。例如：

const vnode = h('div', { id: 'app' }, [
  h('h1', {}, 'Hello Virtual DOM'),
  h('p', {}, 'This is a simple demo.')
]);

2. 将虚拟DOM渲染为真实DOM

接下来实现render函数，把虚拟DOM转换成真实DOM节点：

function render(vnode, container) {
  const el = document.createElement(vnode.tag);

  // 设置属性
  if (vnode.props) {
    Object.keys(vnode.props).forEach(key => {
      el[key] = vnode.props[key];
    });
  }

  // 递归渲染子节点
  if (vnode.children) {
    vnode.children.forEach(child => {
      if (typeof child === 'string') {
        el.appendChild(document.createTextNode(child));
      } else {
        render(child, el); // 递归
      }
    });
  }

  container.appendChild(el);
}

3. 比较新旧虚拟DOM（diff算法简化版）

实现一个简单的patch函数，用于更新已存在的DOM：

function patch(oldVnode, newVnode) {
  if (oldVnode.tag !== newVnode.tag) {
    // 标签不同，直接替换
    const parent = oldVnode.el.parentElement;
    parent.replaceChild(createElement(newVnode), oldVnode.el);
    return;
  }

  // 获取对应的真实DOM
  const el = newVnode.el = oldVnode.el;

  // 更新属性（简化处理）
  if (newVnode.props) {
    Object.keys(newVnode.props).forEach(key => {
      el[key] = newVnode.props[key];
    });
  }

  // 对比子节点
  const oldChildren = oldVnode.children || [];
  const newChildren = newVnode.children || [];

  for (let i = 0; i  newChildren.length) {
    el.removeChild(el.lastChild);
  }
}

// 辅助函数：创建真实DOM节点
function createElement(vnode) {
  if (typeof vnode === 'string') {
    return document.createTextNode(vnode);
  }
  const el = document.createElement(vnode.tag);
  if (vnode.props) {
    Object.keys(vnode.props).forEach(key => {
      el[key] = vnode.props[key];
    });
  }
  if (vnode.children) {
    vnode.children.forEach(child => {
      el.appendChild(createElement(child));
    });
  }
  return el;
}

4. 使用示例

将以上代码组合使用：

// 初始虚拟DOM
let oldVnode = h('div', { id: 'app' }, [
  h('span', {}, 'Hello')
]);

// 渲染到页面
const root = document.getElementById('root');
render(oldVnode, root);

// 模拟更新
setTimeout(() => {
  const newVnode = h('div', { id: 'app' }, [
    h('span', {}, 'Hello World!')
  ]);
  patch(oldVnode, newVnode);
  oldVnode = newVnode;
}, 2000);

基本上就这些。这个例子展示了虚拟DOM的核心流程：生成vnode → 渲染为真实DOM → diff比较 → 局部更新。实际框架如React会在此基础上加入Fiber架构、异步调度等优化机制，但基本思想一致。

本篇关于《虚拟DOM原理：手写简单JS框架解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！