SVG文本元素速度

Question

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

在这个特殊情况下，我实现了一些模仿滚动条的东西，并在屏幕上移动一堆svg特征（~500个元素）。 这些功能的一部分是<text> （~100）元素。 其他元素包括<rect> ， <image>和<path>元素。

所以，我注意到我的应用程序在我的笔记本电脑上并不是非常活泼，并且因为速度而在ipad上处理非常烦人。 但是，无论何时在滚动期间删除或忽略文本元素，它都会立即达到适当的速度。

我尝试做一些速度测试（非常粗略的测试，使用new Date().getTime() ）并发现移动除<text>元素之外的所有元素需要大约10 ms，但是当<text> <text>时需要大约120 ms <text>包括元素。

我相信这是因为每个字母都呈现为矢量形状，并且需要大量的处理能力来计算这种复杂结构究竟阻碍了什么。

是否可以只嵌入文本，因此文本呈现为光栅图形，而不是形状？ 或者以其他任何方式提高渲染文本的性能？

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

Answer 1

您可以使用Canvas预渲染文本并将图像嵌入到SVG中 。 我不知道这与文本元素渲染的比较一般，但是对于我们的演示，这非常有效（请参阅“层次结构”示例中的投影 - 它们首先渲染到画布中，然后在SVG中复制和引用）。

请注意，这些演示也会大量使用虚拟化，即如果您放大图像并且只有部分元素实际位于视口内，则其他元素将从SVG中移除，这会带来巨大的加速。

这些演示不仅仅是移动元素，因此应该很容易获得相同甚至更好的性能。

我不知道如何用raphael做这个，但我相信你应该能够将画布图像中的数据网址放入带有raphael的SVG中。

Answer 2

Paper.print（）根据Raphael网站

创建表示给定文本在给定位置使用给定大小写入的给定文本的路径

基本上，您的文本将转换为路径。 显然这有性能问题。

可能最好坚持使用Paper.text（）

UPDATE

所以不满足于只是提出建议我已经在http://www.jsperf.com上设置了一些测试。 它们可用于比较性能差异，以动画和转换不同类型的Raphael对象。

如果你在iPad上运行它们，它应该显示文本元素是否真的慢得多移动。 还有一点需要注意的是，至少在我运行的测试中，paper.print（）和paper.text（）在性能方面没有那么不同。

在jsperf上运行测试