我如何构建了一个在行选择性能上超越 Vanilla JS 的 JS 框架

Source: Dev.to

结果：1.06 加权几何均值

Sigment 获得了 1.06 的加权几何均值，几乎与 Vanilla JS（1.03）持平，并且显著快于大多数流行框架。

选择行测试

• Vanilla JS: 2.6 ms
• Sigment: 2.2 ms 🚀

Sigment 为什么比 Vanilla JS 更快？

速度来源于架构。典型的“未优化” Vanilla 实现可能依赖通用事件委托或手动 DOM 查找。Sigment 则通过其内部的 gve 函数直接访问 DOM 节点指针，绕过标准的调和层，以比传统命令式代码更高效的方式执行特定更新。

秘密武器：createTemplate

构建高速框架的最大挑战之一是兼顾代码整洁与原始性能。Sigment 通过 createTemplate 函数实现了这一点。

Sigment 并不是在每次渲染时重新创建 DOM 节点，而是采用 模板优先 的方式：先一次性创建 DOM 结构的蓝图，然后克隆它，这比从头构建节点快得多。

const userTemplate = createTemplate((name, role) => 
  div({ class: "user-card" },
    h3(name),
    p(role)
  )
);

// Usage is clean, declarative, and lightning fast
const view = userTemplate("John Doe", "Developer");

这种做法最小化了内存分配，并将你的逻辑与浏览器像素之间的桥梁保持得尽可能短。

为什么这很重要

Sigment 不仅仅是为了赢得基准测试；它表明你不需要笨重的 Virtual DOM 就能获得现代、响应式的开发者体验。你可以拥有专用引擎的速度，同时保持轻量库的简洁。

架构：SPA 与 Islands

无论你是在构建完整的单页面应用（SPA），还是采用 Islands 架构（HTML‑first），Sigment 都能适配你的需求，而不会增加不必要的臃肿。

快来看看

该项目开源，欢迎提供反馈或点星：

• ⭐ 官方基准测试
• ⭐ GitHub 基准测试
• 📖 官方文档