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

Question

我描述了一个我正在研究的基于画布的应用程序（linkurious.js），我发现主要的瓶颈是当前的文本呈现。

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

• 使用位图字体会更有效吗？
• 距离字段？
• 浏览器是否已经足够优化字体渲染，我不应该尝试击败它们？

Answer 1

首先渲染文本，特别是基于矢量的文本很难。即使使用基于WebGL的实现，您也可能无法击败浏览器，因为浏览器字体渲染非常优化（浏览器自1994年以来一直在渲染字体）。

理论上，如果文本没有改变，浏览器/字体引擎应该重新创建并缓存GPU内存中的所有渲染字形，然后将它们作为位图从那里开始。

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