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 的公共尺寸和样式字段使用的是 CSS 像素。

内容安全策略

受限的生产策略通常需要：

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

请根据应用修改此示例，而非盲拷。远程覆盖图像需要在 img-src 中包含其来源并返回兼容的 CORS 响应头。

可见性与清理

当浏览器图表不可见时会暂停或避免不必要的工作。可选的 Safari 保活间隔默认禁用，只有在针对目标 Safari 版本重现资源回收后才应启用。

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