1.3 KiB
1.3 KiB
State.js Performance Benchmark
测试环境
- Playwright (Headless Chromium)
- CPU: Host machine
- 模拟规模: 1000 个列表项
性能基准 (v1.1.1)
| 指标 | 耗时 (ms) | 备注 |
|---|---|---|
| 首次渲染 (1000 items) | 50.20 | 包含模板克隆、数据绑定及 DOM 插入 |
| 浅更新 (Shallow Update) | 10.50 | 触发 Array 重新扫描，基于索引复用 DOM 节点 |
核心架构设计决策 (Design Decisions)
1. 列表复用机制 ($each)
- 机制: 基于索引（Index-based）的 DOM 节点复用。
- 优劣: 避免了 Keyed Diff 的复杂度，在常规增量更新下性能极佳。在头部插入时会触发全量属性扫描，但考虑到该场景频次较低且
_scanTree极快，目前不引入 Key 机制以维持极致轻量。
2. 响应式系统 (NewState)
- 机制: 单层 Proxy 响应式。
- 优劣: 极致的内存开销与初始化速度。不自动支持深层嵌套属性监听，推荐用户使用不可变（Immutable）风格或自赋值（
state.obj = { ...state.obj }）来触发 UI 更新。
3. DOM 绑定与更新
- 机制: 基于 MutationObserver 的自动生命周期管理。
- 特性: 节点插入 DOM 后自动扫描指令，移除后自动解绑依赖，无需手动维护生命周期。