Web Worker 可将高维矩阵运算（如矩阵乘法、SVD、PCA、力导向迭代）移至后台线程，避免阻塞主线程；需用 Transferable Objects 零拷贝传递数据，并严格分离计算（Worker）与渲染（主线程）。
直接在主线程里算高维矩阵，图表一动就卡顿，不是数据量大，而是计算占满了主线程。web worker 的作用就是把这类纯数值运算挪到后台线程跑，让图表渲染和用户交互始终流畅。
哪些矩阵运算适合放进 Worker
只要不碰 DOM、不依赖 window 或 document，以下操作都可下放：
- 矩阵乘法（尤其是 ≥500×500 规模）
- 特征值分解、SVD 奇异值分解
- 协方差矩阵构建与归一化
- PCA 主成分投影坐标计算
- 图布局算法中的力导向迭代（如 d3-force 的每轮位移更新）
关键通信优化：用 Transferable Objects 避免拷贝
传一个 10MB 的 Float32Array 进 Worker，若不处理，主线程会深拷贝——慢且吃内存。正确做法是移交内存所有权：
主线程中：
const matrix = new Float32Array(1000 * 1000);
/* 填充数据 */
worker.postMessage({ op: 'pca', data: matrix }, [matrix.buffer]);
Worker 中：
self.onmessage = e => {
const { data } = e.data;
// data 是原 Float32Array，共享同一块内存
const result = computePCA(data);
self.postMessage({ result });
};
移交后，主线程不能再读写该 buffer，但换来的是零拷贝、毫秒级传递。
可视化流程要拆开：算归算，画归画
visx 渲染本身不能进 Worker（它依赖 DOM Canvas/SVG），但可严格分工：
- Worker 负责：原始数据 → 坐标数组（如 x/y/size/color 数值）、聚类标签、热力图密度网格
-
主线程负责：接收坐标数组 → 用 visx 组件（,
, 等）批量渲染
例如：10 万点散点图，Worker 输出 10 万个 {x: 124.3, y: 89.7, r: 2.1} 对象数组，主线程只做 map + path 生成，不参与任何数学。
避免常见陷阱
• 不要在 Worker 里调 fetch 后直接塞 JSON.parse 大文件——先用 stream 或分块解析，否则仍可能卡住 Worker 线程
• 不要用 console.log 打印大型数组，会触发序列化阻塞；改用采样日志，如 console.log('first 3:', arr.slice(0,3))
• 每次任务完成后主动调用 worker.terminate()，尤其在 React 组件卸载时，防止内存泄漏
