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

Question

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

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

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

Answer 1

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

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

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