优化画布中的文本呈现-- truetype与位图字体的呈现速度

Question

我分析了一个基于画布的应用程序(linkurious.js)，我发现主要的瓶颈是当前的文本呈现。

所以，现在我使用fillText()来呈现文本，但是：

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

Answer 1

首先，渲染文本，特别是基于向量的文本，是很难的.即使使用基于WebGL的实现，您也可能无法击败浏览器，因为浏览器的字体呈现非常优化(浏览器自1994年起就开始呈现字体)。

理论上，如果文本没有改变，浏览器/字体引擎应该在GPU内存中重新创建和缓存所有呈现的象形文字，然后将它们作为位图从其中删除。

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