优化 canvas 中的文本渲染 - truetype 与位图字体的渲染速度
Optimize text rendering in the canvas - the rendering speed of truetype versus bitmap fonts
我分析了一个我正在开发的基于 canvas 的应用程序 (linkurious.js)，我发现目前的主要瓶颈是文本渲染。
所以，现在我使用 fillText() 来呈现文本但是：
- 使用位图字体会更有效率吗？
- 距离场？
- 浏览器是否已经优化了字体渲染，我不应该试图打败它们？
首先渲染文本，尤其是基于矢量的文本，很难。即使使用基于 WebGL 的实现，您也可能无法击败浏览器，因为浏览器字体渲染非常优化（浏览器自 1994 年以来一直在渲染字体）。
理论上，如果文本没有改变，浏览器/字体引擎应该在 GPU 内存中重新创建和缓存所有呈现的字形，然后将它们作为位图从那里 blit 出来。
所以如果文字是性能瓶颈，位图字体就成为一种选择。有很多缺点，但速度不是其中之一。毕竟，这就是 90 年代的计算机在屏幕上生成任何文本的方式。
我分析了一个我正在开发的基于 canvas 的应用程序 (linkurious.js)，我发现目前的主要瓶颈是文本渲染。
所以，现在我使用 fillText() 来呈现文本但是：
- 使用位图字体会更有效率吗？
- 距离场？
- 浏览器是否已经优化了字体渲染，我不应该试图打败它们？
首先渲染文本，尤其是基于矢量的文本，很难。即使使用基于 WebGL 的实现，您也可能无法击败浏览器，因为浏览器字体渲染非常优化（浏览器自 1994 年以来一直在渲染字体）。
理论上，如果文本没有改变，浏览器/字体引擎应该在 GPU 内存中重新创建和缓存所有呈现的字形，然后将它们作为位图从那里 blit 出来。
所以如果文字是性能瓶颈，位图字体就成为一种选择。有很多缺点，但速度不是其中之一。毕竟，这就是 90 年代的计算机在屏幕上生成任何文本的方式。