60FOLDCOMPONENTS

性能指南

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

快速渲染始于 Canvas2D 之前。保持数据列式一次传输，避免主线程解码，并让图表仅渲染可见表示。

先使用 Worker 自动选择和默认细节层级（LOD）策略，然后测量真实工作负载。修改密度、重基比或量化前，请使用 LOD calibration lab] 进行校准。

推荐的加载流水线

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

对于 HTTP 范围读取，确保静态主机支持字节范围且中间缓存保留它们。正确的完整下载回退仍可能对移动访客过于昂贵。

保持初始包体积小

  • 动态导入重量级数据解码器和可选演示。
  • 仅挂载当前可见或选中的图表。
  • 不要仅为证明渲染器能接受多百万行示例而将此类数据部署到着陆页。
  • 将主题目录和次要示例置于受保护的首帧路径之外。
  • 在受限设备上优先使用策划或自适应示例，并链接到完整工作台。

选择 Worker 模式

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

按工作负载调优线条展示

lod.density 是主要的 fidelity/work 控制项。以 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()。
  • 避免在每帧回调内构造数组或格式化字符串。
  • 对应用端流式重建去抖并忽略过期的异步结果。

保留数据含义

性能降低必须保留极值和真实缺口。切勿预先对区间包络求平均、连接缺失区间，或对每个堆叠区域输入独立下采样。对于 OHLCV，应基于实际观测按开-首、最高-最大、最低-最小、收-末和成交量求和进行聚合。