Javascript 通过缓存提高文本绘制性能

我目前正在使用canvas元素为游戏开发一个2d图形引擎。在这个引擎中，各种精灵都有文本标签跟随它们。我做了一些分析以提高性能，并注意到这个引擎中最大的FPS创建器是我对

context.fillText

和

contex.drawText

的调用，用于在每个帧上绘制这些文本标签。我可以理解这是一个性能挂钩，因为光栅化基于向量的TTF字体不是一个简单的任务。因此，我正在寻找一种方法，通过缓存渲染文本来改善这一点

我尝试的

我认为为了加快速度，我可以绘制每个文本标签一次，缓存结果，然后绘制这些缓存结果。因此，我尝试在第一次需要时将每个文本标签绘制到一个不可见的画布上。但为了做到这一点，我需要知道渲染文本的宽度和高度，以便创建具有适当大小的背景画布。我试图通过

context.measureText

实现这一点，但不幸的是，许多浏览器没有完全实现它（Firefox只返回宽度，而不返回高度或其他任何内容）

我尝试的另一件事是让浏览器HTML呈现引擎处理文本缓存。因此，我没有使用画布绘制文本标签，而是使用

位置：绝对

创建HTML

元素，将它们添加到画布所在的

中，并在每个帧中移动这些元素，以便它们始终位于需要的位置。这种方法在性能上是可行的，但它会导致一系列其他问题。有些是可以解决的（文本标签捕捉点击事件，文本在画布外绘制），但另一些则不那么容易修复（画布无法在文本上绘制）。所以我放弃了这个解决方案

---

你知道我还能做什么吗？

你应该能够在

设置超时（…）

内脱机文本渲染，让其余的渲染继续顺利进行。

要缓存文本，你可以使用HTML元素，该元素具有

可见性：隐藏
但不具有
显示：无
（使其大小能够容纳内容）-测量其计算出的宽度和高度，并使用它来调整缓存源画布的大小。对于HTML元素，请指定相同的字体（使用
@font-face
）和大小等

在确保
@font-face
声明中指定的字体已完全加载后，您可能需要执行此操作。
$（文档）。就绪（..）
将无法可靠工作。在
$（窗口）内执行此操作应该是安全的。加载（..）
只有在加载所有内容和资源后才会触发。
这应该如何解决我的问题？我需要在每一帧上绘制文本标签。它们需要与场景中的所有其他内容一起绘制。但是，如果使用0或接近0的超时值，我相信延迟不会那么明显。另外re可能是屏幕上的其他项目，您可以从主渲染队列中取消优先级。例如，HUD。您似乎并不真正理解这个问题。并行化无法解决我当前每秒重复渲染完全相同的文本60次的问题。或者更确切地说，我希望它是每秒60次，现在更像是这样20因为所有的字体渲染都需要很长时间。（顺便说一句：我的HUD不是画布的一部分-它上面包含HTML元素）好的，关于缓存渲染的文本，您是否尝试过在（可见性：隐藏）HTML元素（具有字体面）上渲染相同字体和大小的文本；测量其计算出的大小，并将其用于创建缓存源画布。