60FOLDCOMPONENTS

性能指南

为大型数据集设计数据加载和图表更新。

快速渲染从 Canvas2D 之前开始。保持数据列式，一次性传输，避免在主线程解码，并让图表仅渲染屏幕上可见的细节。

LOD 意味着细节层级：渲染器使用与屏幕大小对应的表示来处理大数据，并在用户缩放时显示更细的细节。首先使用 Worker 自动选择和默认 LOD 策略，然后测量真实工作负载。仅在更改密度、基线比率或量化时使用 LOD 校准实验室。

推荐的加载流程

  1. 当首帧延迟重要时，显示保持极值的缩略预览
  2. 在专用数据 Worker 中启动网络获取和解码
  3. 仅从列式格式读取所需的列和范围
  4. 验证对齐的长度、有限的有序 X、单位和声明的间隙。
  5. 将类型化列仅传输一次到图表渲染器。
  6. 传输后终止数据 Worker，以免其保留另一份副本。

对于 HTTP 范围读取，请确保静态主机支持字节范围且中间缓存保留这些范围。即使提供了正确的完整下载回退，对于移动端访客仍可能代价过高。

保持初始包大小尽量小

  • 动态导入占用资源大的数据解码器和可选示例演示
  • 仅挂载当前可见或已选中的图表
  • 不要仅为了证明渲染器能处理大数据集就将数百万行的演示数据发送到登陆页
  • 将主题目录和次要示例排除在受保护的首帧路径之外。
  • 在受限设备上优先使用策划或自适应示例，并链接到完整的工作台。

选择 Worker 模式

在通用应用中使用 renderMode: "auto" 并测量解析出的模式。主线程模式适用于测试和小型静态图表，但大型交互式数据集通常应在 Worker 中运行。

通过工作负载调整线条呈现

大多数应用无需自定义细节层级（LOD）值。

lod.density 是主要的保真度/工作量控制。从 0.75 开始。当局部细节明显不足且帧时间仍然充裕时提高其值；对于多遍填充的区间、高设备像素比或 Canvas2D 填充成本占主导的浏览器则降低其值。

表现平滑度取决于 rebaseRatio 和 quantizationStep，而非仅由密度决定。更细的值会减少单次纹理切换，但会使层级查询更频繁。请在真实缩放手势下调优，并比较稳态帧时间、查询访问次数、呈现顶点数及视觉稳定性。

在开发阶段临时使用 setStatsCallback：

chart.setStatsCallback((stats) => {
  console.table({
    frame: stats.frameTime,
    mode: stats.presentationMode,
    vertices: stats.presentationVertices,
    visits: stats.presentationQueryVisits,
    ready: stats.lodReady,
  });
}, { intervalMs: 250 });

当应用不采集遥测时，在生产环境中禁用该回调。

批量更新

  • 当完整批次已存在时，使用批量类型数组 API。
  • 在由一次 UI 操作触发的多个同步命令式更改中使用 batch()。
  • 避免在每帧回调中构建数组或格式化字符串。
  • 对应用端的流式重建进行防抖，并忽略过时的异步结果。

图表的流式 LOD 构建器在新样本到达时完成基于快照的工作，并在替换就绪前保持已完成级别可用。不要在每次观测时重置流或替换完整数据集；请通过 streaming APIs 追加。折线流式更新以增量方式更新边界，而不是在每次追加时重新扫描完整缓冲区。

仅当回调或活动侦听器能够接收统计信息时，框架适配器才会收集这些统计信息。Vue 在唯一的 .once 侦听器被消费后停止收集；Angular 在订阅结束或输出关闭时也会停止。应用不再使用测量值时，应移除遥测侦听器。

保留数据含义

性能降级必须保留极值和真实缺口。不得预先平均范围包络、连接缺失区间或对每个堆叠面积输入独立下采样。对于 OHLCV，应根据实际观测进行聚合：开盘取首值、最高取最大、最低取最小、收盘取末值、成交量求和。