乐闻世界logo
5月27日 16:00

SolidJS 为什么不用虚拟 DOM？细粒度响应式如何实现更高性能？

虚拟 DOM 曾是前端框架的核心创新，但 SolidJS 选择了一条不同的路——完全抛弃虚拟 DOM，转而依靠编译时优化和细粒度响应式系统来实现高性能。这种设计在 JS Framework Benchmark 中持续领先，更新速度可达 React 的 5-10 倍。

虚拟 DOM 的性能瓶颈在哪？

虚拟 DOM 的工作流程是：状态变化 → 生成新虚拟树 → Diff 对比新旧树 → 最小化 DOM 更新。这个流程存在三个固有开销：

  1. 全量渲染：React 中 setState 触发后，整个组件函数重新执行，所有 JSX 表达式重新求值，即使只有一处状态改变
  2. Diff 计算：需要遍历虚拟树进行逐层对比，组件树越大，Diff 成本越高
  3. 内存占用：同时持有新旧两棵虚拟树，对大型应用内存压力显著
javascript
// React：状态更新触发组件重渲染
function TodoList({ items }) {
  const [filter, setFilter] = useState("all");
  // filter 变化时，整个 TodoList 重新执行
  // 即使 items 没变，所有子组件也会重渲染
  return (
    <div>
      <FilterBar filter={filter} onChange={setFilter} />
      {items.filter(matchFilter(filter)).map(item => <TodoItem key={item.id} />)}
    </div>
  );
}

SolidJS 的核心架构：编译时 + 细粒度响应式

SolidJS 从两个层面同时优化：编译时将 JSX 转换为直接 DOM 操作，运行时通过 Signal 精准追踪依赖。

编译时：JSX 到 DOM 指令

SolidJS 的编译器不会生成 createElement 调用，而是将 JSX 直接编译为真实的 DOM 创建和更新指令：

javascript
// 编译前：你写的 JSX
function Counter() {
  const [count, setCount] = createSignal(0);
  return <div class="counter"><span>{count()}</span></div>;
}

// 编译后：实际运行的代码
function Counter() {
  const [count, setCount] = createSignal(0);
  const _el$ = document.createElement("div");
  _el$.className = "counter";
  const _el$2 = document.createElement("span");
  // 关键：这里建立的是 signal 与 DOM 节点的直接绑定
  insert(_el$2, count);
  _el$.appendChild(_el$2);
  return _el$;
}

编译产物中没有任何虚拟节点对象，也没有 Diff 算法。insert 函数在首次渲染时执行 DOM 插入，后续 count 变化时直接更新 _el$2 的文本内容。

运行时：Signal 的依赖追踪机制

createSignal 创建的 Signal 内部维护一个订阅者集合。当 Signal 值被读取时，当前执行的响应式上下文（Effect、Memo 或表达式）自动注册为订阅者；当值被写入时，仅通知这些订阅者执行更新：

javascript
const [count, setCount] = createSignal(0);

// 读取 count() 时，这个 Effect 自动注册为 count 的订阅者
createEffect(() => {
  document.getElementById("display").textContent = count();
});

// 只有上面的 Effect 会被触发，其他不依赖 count 的代码完全不受影响
setCount(1);

这种机制的核心优势是更新粒度到单个 DOM 节点级别——一次 setCount 调用只会修改一个 textContent，不涉及组件重渲染、虚拟树对比或任何中间层。

与 React 的关键差异对比

维度ReactSolidJS
状态更新触发整个组件重渲染仅更新绑定的 DOM 节点
更新粒度组件级节点级
编译策略JSX → React.createElementJSX → 原生 DOM 操作
运行时开销虚拟树 Diff + 协调无 Diff，直接 DOM 操作
内存占用持有虚拟树仅 Signal + 订阅者集合
组件模型函数重执行函数只执行一次

"函数只执行一次"是 SolidJS 与 React 最本质的区别。React 的组件是渲染函数，每次状态更新都重新调用；SolidJS 的组件是设置函数，只在挂载时执行一次，后续更新完全由 Signal 驱动。

实际性能表现

在 JS Framework Benchmark 的标准化测试中，SolidJS 的表现：

  • 创建行：比 React 快约 3-4 倍
  • 更新行：比 React 快约 5-10 倍
  • 内存占用：约为 React 的 30%-50%
  • 包体积：SolidJS 运行时约 7KB（gzip），React + ReactDOM 约 40KB+

需要注意的是，这些数据来自极端场景的基准测试。在实际业务中，DOM 操作通常不是主要瓶颈，网络请求和数据处理往往占据更多时间。SolidJS 的优势在高频更新场景（实时数据、动画、大型表格）中最为明显。

什么时候选择 SolidJS？

适合的场景：

  • 实时数据仪表盘、金融行情等高频更新界面
  • 大型列表或表格的渲染与交互
  • 对首屏加载和运行时性能有严苛要求的应用
  • 需要极小包体积的嵌入式或移动端场景

需要权衡的方面：

  • 生态系统远小于 React，第三方组件库较少
  • 团队学习成本：响应式思维与 React 的单向数据流思维差异较大
  • 社区和招聘资源相对有限

SolidJS 证明了虚拟 DOM 并非前端框架的必选项。通过编译时优化消除运行时开销，通过细粒度响应式实现精准更新，它在架构层面提供了另一种解决前端性能问题的思路。

标签：SolidJS