Javascript 优化画布中的文本渲染-truetype与位图字体的渲染速度

我分析了我正在开发的一个基于画布的应用程序（linkurious.js），发现目前的主要瓶颈是文本呈现

因此，现在我使用

fillText（）

来渲染文本，但是：

• 使用位图字体会更有效吗
• 距离场
• 浏览器是否已经对字体渲染进行了足够的优化，以至于我不应该试图打败他们

---

首先，渲染文本，尤其是基于向量的文本，是很困难的。即使使用基于WebGL的实现，您也可能无法击败浏览器，因为浏览器字体呈现是非常优化的（浏览器从1994年开始呈现字体）

理论上，如果文本没有改变，浏览器/字体引擎应该在GPU内存中重新创建并缓存所有渲染的glyph，然后将它们作为位图显示出来

---

因此，如果文本是性能瓶颈，位图字体将成为一个选项。有很多缺点，但速度不是其中之一。毕竟，这就是90年代的计算机在屏幕上产生任何文本的方式。

因此，使用位图字体将击败GPU对预渲染字体的缓存？理论上不应该。但这取决于您渲染的文本类型、更改的次数和频率。知道的唯一方法是跨不同浏览器编写代码和基准测试。您需要在脱机或应用程序启动时预生成TTF->位图spritesheet。省去麻烦，不要使用sprite sheet字体。为要显示的文本创建缓冲区，将文本绘制到该缓冲区，然后仅将该缓冲区渲染到画布。渲染文本不会在只发生一次时变慢，而是在每次帧调用调用fillText时就会看到性能问题。历史记录：我发现了真正的瓶颈：设置

context。每个文本的font

使渲染变慢了2倍。