分形渲染应将像素级复数迭代计算剥离至Worker并行处理，主线程仅负责调度、拼图与渲染；采用分块、Worker池、渐进式渲染及精度控制等策略保障流畅性与稳定性。
直接用主线程算分形（比如曼德博集、朱利亚集）会卡顿，尤其放大到深层数时迭代次数飙升。核心思路是把耗时的像素级复数迭代计算交给 Worker 处理，主线程只管调度、拼图和渲染。
分形计算任务必须剥离到 Worker
分形渲染本质是大量独立像素点各自执行相同逻辑：对每个坐标 (x, y)，代入复数公式反复迭代，判断是否发散。这天然适合并行——每个像素互不依赖。
- 主线程不能执行循环 1000×1000 次复数运算，否则页面完全冻结
- Worker 中用纯数学逻辑做迭代（如
z = z² + c），不碰 DOM、不调 canvas API - 传入 Worker 的是区域参数：起始坐标、宽高、缩放倍数、最大迭代深度，不是整张图
- Worker 输出是 Uint8ClampedArray，按 RGBA 排列，每个像素 4 字节，可直接 transfer 回主线程
按块切分 + 多 Worker 并行加速
单个 Worker 处理一整屏在高分辨率下仍慢。更高效的是“分而治之”：
- 把画布划成若干矩形块（如 256×256 像素/块），每块分配给一个 Worker
- 主线程创建多个 Worker 实例（数量建议 ≤ CPU 核心数），每个负责一块的迭代计算
- 使用
Promise.all()等待所有块完成，再按顺序拼接成完整像素数组 - 避免动态新建/销毁 Worker：维护 Worker 池，空闲时复用，减少启动开销
渐进式渲染与交互响应优化
用户拖拽或缩放时，不需要等上一帧算完才开始下一帧；要让视觉反馈及时：
立即学习“前端免费学习笔记（深入）”；
- Worker 计算中支持中断：主线程发送终止信号，Worker 在每次迭代后检查
self.aborted标志位 - 低分辨率预览先行：先用 1/4 分辨率快速出轮廓，再逐步填充高清细节（类似 progressive JPEG）
- 缩放过程中，只重算变化区域（脏区更新），其余部分复用上次结果或做线性插值过渡
- 鼠标移动时，实时显示当前坐标的复数 c 值和初步迭代状态，提升专业感
GPU 加速衔接（可选进阶）
当分形图形需叠加动画、光照或粒子效果时，可把 Worker 输出的像素数据上传至 WebGL：
- Worker 计算结果写入 SharedArrayBuffer 或 Transferable TypedArray
- 主线程用
gl.texSubImage2D()将数据更新为纹理 - 用简单着色器实现色彩映射、辉光、动态调色等后期效果，CPU 不再参与着色计算
- 若浏览器支持 OffscreenCanvas，甚至可将整个 Canvas 渲染也移入 Worker，彻底解耦
不复杂但容易忽略：分形的数学稳定性比颜色酷炫更重要。迭代公式稍有浮点误差，放大千倍后就会崩坏。务必使用 Math.fround 或手动控制精度，避免隐式 double 转换。
