我正在构建一个依赖svg的Web应用程序。作为参考，我使用raphael js库来处理所有这些。
在这个特殊情况下，我实现了一些模仿滚动条的东西，并在屏幕上移动一堆svg功能（~500个元素）。这些功能的一部分是<text>（~100）元素。其他元素包括<rect>，<image>和<path>元素。
所以，我注意到我的应用程序在我的笔记本电脑上并不是非常活泼，并且由于速度的原因，在ipad上处理非常烦人。但是，无论何时在滚动过程中删除或忽略文本元素，它都会立即达到合适的速度。
我尝试进行一些速度测试（非常粗略的测试，使用new Date().getTime()）并发现移动除<text>元素之外的所有元素需要大约10 ms，但是当需要大约120 ms时包含<text>个元素。
我相信这是因为每个字母都呈现为矢量形状，需要大量的处理能力来计算这种复杂结构究竟是什么阻碍。
是否可以嵌入文本，因此文本呈现为光栅图形，而不是形状？或者以其他方式提高渲染文本的性能？
我不需要背景透明度，也不使用任何花哨的字体。
答案 0 :(得分：4)
您可以使用Canvas和embed images into the SVG预呈现文本。我不知道这与一般的文本元素渲染有什么比较，但对于our demos这很有效（参见“层次结构”示例中的投影 - 它们首先渲染到画布中，然后复制并引用自在SVG内。）
请注意，这些演示也会大量使用虚拟化，即如果您放大图像并且只有一些元素实际位于视口内，则其他元素将从SVG中移除，这会带来巨大的加速。
演示不仅仅是移动元素，因此应该很容易获得相同甚至更好的性能。
我不知道如何用raphael做这个，但我相信你应该能够将画布图像中的数据网址放入带有raphael的SVG中。
答案 1 :(得分：2)
Paper.print（）
创建路径，该路径表示在给定位置使用给定字体使用给定大小
写入的给定文本
基本上，您的文本将转换为路径。显然这有性能问题。
可能最好坚持使用 Paper.text（）
<强>更新
所以不满足于仅仅提出建议我已经在http://www.jsperf.com上设置了一些测试。它们可用于比较性能差异，以动画和转换不同类型的Raphael对象。
如果你在iPad上运行它们，它应该显示文本元素是否真的慢得多移动。还有一点需要注意的是，至少在我运行的测试中，paper.print（）和paper.text（）在性能方面没有那么不同。