SVG文本元素速度

Question

我正在构建一个依赖于 svg 的 Web 应用程序。为了参考，我使用 raphael js 库来处理所有的内容。

在这种情况下，我实现了一个类似于滚动条的东西，并将一堆 svg 功能（~500 个元素）移动到屏幕上。其中一部分特性是 <text> 元素（~100 个）。其他元素包括 <rect>、<image> 和 <path> 元素。

我注意到我的应用程序在我的笔记本电脑上并不是很流畅，在 iPad 上处理起来非常糟糕，由于速度缓慢而令人讨厌。但是，每当在滚动过程中删除或忽略文本元素时，它立即变得更加流畅。

我尝试进行了一些速度测试（非常原始，使用new Date().getTime()），发现除了 <text> 元素外，移动所有元素大约需要 10 毫秒，但是当包括 <text> 元素时，需要大约 120 毫秒。

我相信这是因为每个字母都被渲染为矢量形状，计算这样一个复杂结构的确切遮挡需要大量的处理能力。

是否可能只嵌入文本，以便将文本呈现为光栅图形，而不是形状？或通过其他方式改进呈现文本的性能？

我不需要背景透明度，也不使用任何花哨的字体。

- gintas

---

你是使用 paper.print() 还是 paper.text() 来创建文本元素？同时提供一个 fiddle 会更好。 - Bruno

你有针对特定的浏览器进行优化吗？不同的浏览器性能差异非常大。 - Sebastian

@Bruno 我正在使用 paper.text()，但速度仍然很慢。 - gintas

@Sebastian，我针对现代浏览器（IE9+，chrome，ff）和平板电脑进行开发。 - gintas

@gintas，有没有可能让我们看一下你的代码，它可以移动不同的raphael对象？ - Bruno

我记得Raphaël在处理文本方面有些低效，作为比较，这里有一个纯SVG滚动1000个文本元素的示例 - http://jsfiddle.net/arJZL/ - Erik Dahlström

Answer 1

你可以使用Canvas和将图像嵌入SVG来预渲染文本。我不知道这与一般的文本元素渲染相比如何，但对于我们的演示文稿来说，这非常有效（请参见“层次结构”示例中的投影效果 - 它们首先被渲染到画布上，然后从SVG中进行复制和引用）。

请注意，这些演示文稿还大量使用虚拟化，即如果您放大图像并且只有一些元素实际上在视口内，其他元素将从SVG中移除，这会极大地提高速度。

这些演示文稿做了很多事情，不仅是移动元素，所以应该很容易获得相同甚至更好的性能。

我不知道如何使用raphael来完成这个，但我相信你也应该能够将画布图像的数据url放入SVG中。

- Sebastian

---

听起来像是一个有趣的解决方案。现在会尝试一下。 - gintas

Answer 2

“Paper.print()” 根据Raphael网站的说法，创建一个路径，该路径表示在给定位置使用给定字体写入的给定文本，并具有给定大小。基本上，你的文本会被转换为路径，这显然会对性能产生影响。最好还是使用“Paper.text()”。更新：因此，不只是提供建议，我在http://www.jsperf.com上设置了一些测试。它们可用于比较动画和变换不同类型Raphael对象的性能差异。如果您在iPad上运行这些测试，就可以看到文本元素是否真的比较慢移动。还要注意的另一件事是，至少在我进行的测试中，“paper.print()”和“paper.text()”在性能方面并没有太大的区别。在jsperf上运行测试。

- Bruno