大数据性能

Yotsuba Gantt 将性能作为组件契约，而不是演示页特例。

Vue 策略

• 行与时间列双向虚拟化，任务树、网格、任务条和依赖线共享同一个窗口。
• 滚动、表格同步、联动消息和可见范围更新按动画帧合并。
• 依赖关系使用邻接索引，只构建当前窗口附近的路径。
• 400 条以上的密集聚焦使用线性密度桶算法。
• Viewport Activity Budget 只允许少量高优先级可见元素持续动效；滚动、拖拽和页面隐藏时暂停。
• dataMode="immutable" 避免对大型输入做深层响应式转换。
• visible-range-change、totalTaskCount 与 taskOffset 支持远程分页或游标窗口。

React 策略

• 120 行以上默认启用行虚拟化，180 个时间格以上默认启用列虚拟化。
• 任务与依赖 ID 索引通过 useMemo 只在输入变化时重建。
• 依赖线只处理纵向和横向窗口内的关系。
• 多图滚动在原生滚动事件内同步，避免等待 React 状态提交。
• onVisibleRangeChange 可驱动远程分页，getRenderStats() 可在运行时验证真实渲染量。
• React 产物约 22.13 kB JS / 6.57 kB gzip，CSS 约 9.87 kB / 2.87 kB gzip。

10,000 条基准

测试日期：2026-08-01。桌面 Chromium，Vue 产品演示压力入口。

指标	结果
DOM 节点	1,034
60 帧平均间隔	8.22 ms
P95	10.5 ms
最大帧间隔	11.7 ms
Long Task	0
静止持续动画	4

基准只能说明当前机器、浏览器和演示数据下的结果。业务侧仍应使用性能面板复核自定义插槽、图片、字体和复杂事件处理器的成本。

Flutter 策略

• 左右区域都使用 ListView.builder，只构建可见任务行。
• 时间表头和网格由 CustomPainter 批量绘制。
• 依赖线按可见行与水平视口裁剪。
• 可关闭的行入场过渡只作用于当前新建的虚拟行。
• onVisibleRangeChanged 为远程窗口加载提供日期和行索引。