Canvas渲染大量文本卡顿的核心在于频繁fillText及measureText等同步API阻塞主线程；应预生成文本图片、本地缓存纹理、分层局部更新、动态精简内容。
Canvas渲染大量文本时卡顿，核心问题不在文本本身，而在于反复调用 fillText 和频繁触发的测量、重绘、状态切换等操作。尤其当标签数达数百个以上（如智慧园区400+建筑名），主线程会被 measureText、getImageData 等同步API严重阻塞，帧率骤降，首屏加载延迟明显。
预生成文本图片，绕过实时绘制
不依赖每次 fillText 实时渲染，而是将常用文本（如固定字号/字体/颜色的标签）预先绘制到离屏 Canvas 上，导出为 ImageBitmap 或 HTMLImageElement，后续直接 drawImage 合成。这一步把耗时的文本光栅化从渲染循环中剥离出来。
- 对重复样式文本做唯一 key（如
"14px SimHei #333-办公大楼"），避免重复生成 - 使用
canvas.toDataURL("image/png")或canvas.transferToImageBitmap()获取图像资源 - 配合
willReadFrequently: true创建上下文，提升像素读取效率
本地缓存文本纹理，减少重复计算
预生成的文本图片若每次页面加载都重建，仍会拖慢首屏。应结合 IndexedDB 持久化存储——把文本内容 + 样式哈希 → 图片二进制数据映射起来，下次加载直接读取缓存。
- 首次生成后写入 IndexedDB，键为样式与文本的组合 hash（如 SHA-256）
- 加载时先查库，命中则创建
Blob → URL.createObjectURL() → Image快速复用 - 支持版本控制：字体更新或主题切换时自动失效旧缓存
分层+局部更新，避免全量重绘
文本标签通常位置固定、更新频率低。与其每帧清空整个画布再重绘所有标签，不如分层管理：
- 用一个离屏 Canvas 缓存所有静态标签（背景层），主 Canvas 只负责动态元素（如闪烁图标、移动轨迹）
- 标签位置变化时，仅清除其上一帧所在矩形区域：
ctx.clearRect(x-2, y-2, width+4, height+4) - 新增/删除标签时，只重绘受影响的局部，而非调用
clearRect(0,0,w,h)
精简文本内容，降低渲染压力
不是所有文字都需要完整显示。在地图、监控大屏等场景中，可策略性压缩信息：
- 超长文本自动截断 + “…”，并用 title 属性或 tooltip 补充全称
- 根据缩放级别动态调整显示粒度：比如 zoom ≤ 12 时只显示楼号（“A-301”），zoom ≥ 15 才显示全名（“研发中心A座301室”）
- 中文优先按字宽均分（非空格分割），避免英文单词被错误折行导致测量失准
