Frameworks 多框架基准测试项目

对比 TypeDOM 与主流前端框架在同一组 UI 场景下的渲染性能， 并对比 @type-dom/signals 与主流响应式库的依赖传播耗时与内存开销。

项目结构

frameworks/              # 各框架的等价实现（Nx 项目，Vite 构建）
├── react/               # React 19
├── vue/                 # Vue 3（SFC）
├── solidjs/             # SolidJS
├── svelte/              # Svelte 5
├── type-dom/            # TypeDOM（主要对照对象）
├── vanilla/             # 原生 JS（性能地板 / 基线）
└── utils/               # 公共工具
reactivity/              # 响应式库基准（Node 环境）
benchs/                  # Puppeteer / Lighthouse 浏览器端基准脚本
webdriver/               # 自 js-framework-benchmark 移植的 runner（暂不可用）

packages/ 是历史遗留的空目录，实际源码都在 frameworks/。

安装

npm install

一、浏览器端基准

1. 启动应用

各子包没有 npm scripts，请通过 Nx 运行（target 由各项目的 vite.config.ts 推断）：

nx serve vanilla    # http://localhost:2200
nx serve react      # 5200
nx serve solidjs    # 6200
nx serve svelte     # 7200
nx serve type-dom   # 8200
nx serve vue        # 9200

nx run-many -t serve    # 一次性全部启动

框架	dev	preview
vanilla	2200	2300
react	5200	5300
solidjs	6200	6300
svelte	7200	7300
type-dom	8200	8300
vue	9200	9300

2. 运行测量

以下脚本依赖 dev server 已启动：

node benchs/performance.js        # Puppeteer + Lighthouse → framework-performance-results.csv
node benchs/rows-test.mjs         # 表格行操作
node benchs/virtual-list.mjs      # 虚拟列表
node benchs/memory-analysis.mjs   # 内存占用
node benchs/generate-charts.js    # 生成图表

3. 基准项

9 项 CPU 基准（定义见 webdriver/src/benchmarksCommon.ts）： create rows、replace all rows、partial update、select row、swap rows、 remove row、create many rows、append rows to large table、clear rows。

构建生产版本

nx build type-dom       # 单个
nx run-many -t build    # 全部

二、响应式库基准

在 Node 中对比各 signals 库的传播耗时与内存占用，不需要浏览器：

nx build reactivity
node --jitless --expose-gc reactivity/dist/index.js

参赛选手在 reactivity/src/frameworksList.ts 注册，当前启用： @type-dom/signals、alien-signals、Angular Signals、MobX、Preact Signals、 Reactively、Solid、Pota、Svelte v5、Vue reactivity。

核心组件

各框架实现相同的标准化组件（位于 frameworks/<name>/src/app/）：

组件	说明	vanilla 已实现
Rows	1k/10k 行表格：增删改、全量替换、交换行	是
Counter	基础状态管理	否
VirtualList	虚拟滚动列表	否
List	列表渲染	否

目录规范

• public/：静态资源（各框架独立）
• src/app/：组件实现
• main.ts(x)：入口，挂载到 #app
• results.txt：该框架的实测结果

已知状态

• webdriver/ 暂不可用：它的 initializeFrameworks 依赖 http://host:port/ls 服务拉取框架清单， 并要求 frameworks/keyed/<name> 目录结构以及 package.json 里的 js-framework-benchmark 元数据， 当前仓库均不满足。
• benchs/performance.js 中 TEST_RUNS = 1，因此 CSV 里 avg/median/min/max 完全相同， 不具备统计意义；需要结论时请先调大该值。
• frameworks/*/results.txt 目前是模板占位值（如 0.00 ms），不是实测数据。