【发布时间】：2015-09-28 02:01:04
【问题描述】：
我分析了一个我正在开发的基于画布的应用程序 (linkurious.js)，我发现当前的主要瓶颈是文本渲染。
所以，现在我使用fillText() 来呈现文本，但是：
- 使用位图字体会更有效吗？
- 距离场？
- 浏览器是否已经对字体渲染进行了足够优化，以至于我不应该试图击败它们？
【问题讨论】：
标签： javascript html performance fonts html5-canvas
【发布时间】：2015-09-28 02:01:04
【问题描述】：
首先，渲染文本，尤其是基于矢量的，很难。即使使用基于 WebGL 的实现，您也可能无法击败浏览器，因为浏览器字体渲染已经非常优化（浏览器自 1994 年以来一直在渲染字体）。
理论上，如果文本没有改变，浏览器/字体引擎应该重新创建所有渲染的字形并将其缓存在 GPU 内存中，然后将它们从那里作为位图从那里删除。
所以如果文本是性能瓶颈，位图字体成为一种选择。有很多缺点，但速度不是其中之一。毕竟，这就是 90 年代的计算机如何在屏幕上生成任何文本的方式。
【讨论】：
-
那么，使用位图字体会击败预渲染字体的 GPU 缓存？
-
理论上不应该。但这取决于您要渲染的文本类型、数量、更改频率。唯一知道的方法是跨不同浏览器编写代码和基准测试。
-
您需要在离线或应用程序启动时预先生成 TTF -> 位图精灵表。
-
省去麻烦，不要使用精灵表字体。为要显示的文本创建一个缓冲区，将文本绘制到该缓冲区，然后仅将该缓冲区渲染到画布上。仅发生一次时，渲染文本并不慢，当您在每帧调用中调用 fillText 时，您会看到性能问题。
-
历史记录：我发现了真正的瓶颈：为每个文本设置
context.font会使渲染速度慢 2 倍。