Worker、主线程 与 渲染

Sixtyfold 采用单一 TypeScript 渲染设计，包含三种宿主：一个 OffscreenCanvas Worker、一个异步主线程适配器，以及服务器端渲染入口。Canvas2D 是唯一的图形后端。

渲染器选择是 LineChartOptions 与 StockChartOptions 的一部分。解析得到的模式可从 chart.getRenderMode() 获取。

自动选择

renderMode: "auto" 在浏览器支持 Worker、OffscreenCanvas 和画布传输时偏好使用 Worker。当这些能力缺失或 Worker 构造被同步阻塞（包括受限的内容安全策略导致的阻塞）时，回退到主线程。

const chart = new LineChart(canvas, { renderMode: "auto" });
await chart.initialize();

console.log(chart.getRenderMode()); // "worker" or "main"

renderMode: "worker" 表示偏好，而非承诺；当无法启动 Worker 渲染时仍会回退。有关遥测和支持信息，请使用 getRenderMode()。

Worker 模式

Worker 模式会将画布和大量类型化数组缓冲区的控制权转移出去。对于交互式的数百万点图表，这是首选路径，因为层级构建、剔除、布局和绘制不会占用浏览器的 UI 任务。

主线程回调（例如自定义提示工具渲染）接收的是紧凑的渲染器消息，而非对 Worker 状态的直接访问。请保持回调的确定性并尽快返回。

主线程模式

在测试环境、缺少可转移画布的浏览器、禁止 Worker 的严格宿主，或对集成简洁性优先于 UI 线程隔离的小型静态图表中，请使用 renderMode: "main"。

主线程适配器有意异步传递渲染器消息。不要假定调用 setData 时其首帧已同步完成；当帧完成很重要时，请使用统计或应用级就绪 UI。

发布检查通过主线程路径和 Chromium、Firefox 以及 WebKit 中的生产默认 auto 路径对 Line 和 Stock 进行测试。在支持的引擎上，auto 解析为一个 OffscreenCanvas Worker。强制 Worker 的契约也在 Chromium 中运行。这是为了验证兼容性，而非保证与设备无关的帧率。

尺寸与 DPR

通过布局设置画布的 CSS 宽度和高度。Sixtyfold 会监测元素尺寸和设备像素比的变化，然后更新后备存储和渲染器布局。当宿主以无法立即观察到的方式更改布局时，resize() 仍然可用。

避免仅设置画布的 width 和 height 属性以实现响应式图表。这些属性属于后备存储值，而 Sixtyfold Charts 的公开尺寸和样式字段使用的是 CSS 像素。

内容安全策略

生产环境中常见的严格策略通常需要：

default-src 'self';
script-src 'self';
worker-src 'self';
img-src 'self' data: blob:;
connect-src 'self';

请根据应用进行调整，不要盲目复制此示例。远程覆盖图像需要其来源在 img-src 且具有兼容的 CORS 响应头。

可见性与清理

当图表不可见时，浏览器会暂停或避免不必要的工作。可选的 Safari keep-alive 间隔默认禁用，仅当在目标 Safari 版本上重现资源回收问题后才应启用。

在永久丢弃画布之前始终调用 destroy()。在单页应用中，框架的清理钩子是正确的位置。

框架就绪回调用于确认初始化和初始属性成功设置，而不是确认画布已绘制帧。React 19.2+ 的 Activity 隐藏会保留已挂载的渲染器及其内存，直到实际卸载；它不是 Worker 释放的边界。参见 adapter 生命周期约定，其中说明了隐藏引用、延迟回调和错误恢复。