如何从头实现一个支持SSR的轻量级虚拟DOM？-js教程-PHP中文网

如何从头实现一个支持SSR的轻量级虚拟DOM？

狼影

发布： 2025-10-03 08:11:02

原创

496人浏览过

答案：通过设计通用vnode结构和render函数，实现轻量级SSR虚拟DOM。定义h函数创建vnode对象，包含tag、props、children；服务端用renderToString将vnode递归转为HTML字符串；客户端用mount函数生成真实DOM并挂载，支持更新；vnode纯数据化确保同构兼容，避免依赖DOM或window，通过构建工具共用代码，实现首屏渲染优化与客户端激活。

如何从头实现一个支持ssr的轻量级虚拟dom？

实现一个支持 SSR（服务端渲染）的轻量级虚拟 DOM，核心在于设计一套通用的 vnode 结构，在浏览器和 Node.js 环境中都能运行。重点是将视图抽象为可序列化的对象，并提供 render 函数分别在服务端生成 HTML 字符串、在客户端进行挂载与更新。

定义 VNode 结构

vnode 是对真实 DOM 节点的描述，用普通对象表示，包含标签名、属性、子节点等信息。

function h(tag, props, children) {
  return {
    tag,
    props: props || {},
    children: children || []
  };
}

登录后复制

例如：h('div', { id: 'app' }, [h('span', {}, ['Hello'])]) 会生成一个描述结构的对象，不依赖 DOM API，可在服务端直接使用。

实现服务端渲染（SSR）

在 Node.js 中，把 vnode 转为 HTML 字符串。遍历 vnode 树，递归拼接标签与属性。

function renderToString(vnode) {
  if (typeof vnode === 'string') return vnode;
  const { tag, props, children } = vnode;
  let attrs = '';
  for (const [key, value] of Object.entries(props)) {
    attrs += ` ${key}="${value}"`;
  }
  const inner = (Array.isArray(children) 
    ? children.map(renderToString).join('')
    : ''
  );
  return `<${tag}${attrs}>${inner}</${tag}>`;
}

登录后复制

这样就能在服务器上把虚拟树转成完整 HTML 发送给浏览器，提升首屏加载体验。

实现客户端挂载与更新

在浏览器中，需要将 vnode 映射为真实 DOM 节点，并支持后续 diff 更新。

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

创建元素函数：

function mount(vnode, container) {
  const el = document.createElement(vnode.tag);
  // 设置属性
  for (const [key, value] of Object.entries(vnode.props)) {
    el.setAttribute(key, value);
  }
  // 处理子节点
  if (Array.isArray(vnode.children)) {
    vnode.children.forEach(child => {
      if (typeof child === 'string') {
        el.appendChild(document.createTextNode(child));
      } else {
        mount(child, null);
        el.appendChild(child.el);
      }
    });
  }
  vnode.el = el; // 缓存真实节点
  container && container.appendChild(el);
}

登录后复制

简单 diff 可以对比新旧 vnode 的 tag 和 key，决定是否复用节点或重新创建。为了轻量，可以先不做精细化 diff，全量替换子树。