OffscreenCanvas+WebWorker是唯一成熟、零拷贝、GPU加速的弹幕渲染解法，因普通Canvas getContext仅限主线程调用，而OffscreenCanvas可在Worker中创建2D/WebGL上下文并支持合成器加速。
高频消息推送场景下，直接在主线程用 Canvas 渲染弹幕粒子极易造成卡顿甚至丢帧。核心解法是把渲染完全移出主线程——OffscreenCanvas + Web Worker 是目前唯一成熟、零拷贝、可 GPU 加速的方案。
为什么必须用 OffscreenCanvas 而不是普通 Canvas
普通 Canvas 的 getContext 只能在主线程调用，所有绘图操作都会阻塞 UI；而 OffscreenCanvas 可在 Worker 中创建并获取 2D 或 WebGL 上下文，且支持浏览器原生合成器加速。关键点：
- 移交控制权后，主线程彻底不碰 canvas，UI 响应无延迟
- Worker 中调用
transferToImageBitmap()可快速生成纹理帧，配合canvas.getContext('bitmaprenderer')实现毫秒级帧提交 - Chrome/Edge/Firefox 已稳定支持，Safari 正在实验（
OffscreenCanvas需开启实验性功能）
Worker 线程内弹幕粒子的高效管理策略
高频弹幕本质是大量短生命周期粒子（文字、图标、光效）持续涌入+自然消亡。Worker 内需避免频繁内存分配和 GC：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 预分配固定长度的粒子池（如 5000 个 slot），用游标索引复用对象，不用
new Particle() - 每个粒子结构极简：仅存
x, y, vx, vy, life, maxLife, fontSize, text等核心字段，避免引用或闭包 - 使用 TypedArray（如
Float32Array）存储坐标与速度，提升循环遍历性能 - 按时间片分批更新：每帧只处理最近 100ms 进来的消息，防止突发流量压垮 Worker
主线程与 Worker 的低开销通信协议
不传原始字符串或 DOM 节点，只传结构化轻量数据：
- 主线程收到新弹幕消息后，序列化为紧凑对象：
{t: Date.now(), txt: '666', c: '#ff5722', s: 14} - 通过
postMessage(data, [])发送（无需 transfer list，因无 ArrayBuffer） - Worker 使用
self.onmessage接收，直接 push 到本地消息队列，不解析 JSON，用data.txt直接读取 - 关键：禁用
JSON.parse，所有字段名用单字母缩写，减少解析耗时
渲染优化：跳过重绘 + 合成加速
10 万粒子不等于每帧都重绘全部。采用“脏区域 + 帧缓冲”双策略：
- 每个粒子标记是否活跃，每帧只遍历活跃粒子（
life > 0） - 用
ctx.clearRect(0,0,w,h)清屏效率低 → 改用全黑背景层 + 粒子叠加模式（ctx.globalCompositeOperation = 'lighter'） - 最终帧用
offscreen.transferToImageBitmap()生成 ImageBitmap，再通过postMessage({frame}, [bitmap])零拷贝传回主线程 - 主线程用
bitmaprenderer或createImageBitmap快速上屏，避免 decode 和 resize 开销
这套路径已在直播平台千人同屏弹幕场景中验证：Chrome 下 8 万动态粒子 + 每秒 200 条新消息，稳定 60fps，主线程 FPS 始终 > 58。
