javascript - SVG 文本元素速度

Question

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

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

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

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

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

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

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

Answer 1

您可以使用 Canvas 和 embed images into the SVG 预呈现文本.我不知道这与一般的文本元素渲染相比如何，但对于 our demos这非常有效(请参阅“层次结构”示例中的投影 - 它们首先呈现到 Canvas 中，然后从 SVG 中复制和引用)。

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

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

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