SVG 文本元素速度答案

【问题标题】：SVG text element speedSVG 文本元素速度
【发布时间】：2012-11-20 16:11:12
【问题描述】：

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

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

所以，我注意到我的应用程序在我的笔记本电脑上并不是很活泼，而且由于速度的原因，在 ipad 上处理起来也很烦人。但是，只要在滚动过程中删除或忽略文本元素，它就会立即达到不错的速度。

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

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

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

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

【问题讨论】：

您是在使用paper.print() 还是paper.text() 创建文本元素。小提琴可能也不错。
您是否针对特定的浏览器集？不同浏览器的性能差异很大。
@Bruno 我正在使用 paper.text()，它仍然很慢。
@gintas 我们有机会看看你的一些在不同 raphael 对象周围移动的代码
ISTR 认为 Raphaël 在文本方面的效率有点低，作为比较，这里有一个在纯 svg 中滚动的 1000 个文本元素的示例 - jsfiddle.net/arJZL

【解决方案1】：

您可以使用 Canvas 和 embed images into the SVG 预渲染文本。我不知道这与一般的文本元素渲染相比如何，但对于 our demos 这工作得很好（请参阅“层次结构”示例中的阴影 - 它们首先渲染到画布中，然后从内部复制和引用SVG）。

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

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

不过，我不知道如何使用 raphael 执行此操作，但我相信您也应该能够使用 raphael 将画布图像中的数据 url 放入 SVG。

【讨论】：

【解决方案2】：

Paper.print() 根据 Raphael 网站

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

基本上您的文本被转换为路径。显然这存在性能问题。

最好还是坚持使用 Paper.text()

更新

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

如果您在 iPad 上运行它们，它应该会显示文本元素的移动速度是否真的慢得多。需要注意的另一件事是，至少在我运行的测试中，paper.print() 和 paper.text() 在性能方面并没有那么不同。

【讨论】：