我正在构建一个依赖svg的Web应用程序.作为参考,我使用raphael js库来处理所有这些.
在这个特殊情况下,我实现了一些模仿滚动条的东西,并在屏幕上移动一堆svg功能(~500个元素).这些特征的一部分是< text> (~100)元素.其他元素包括< rect>,< image>和<路径>元素.
因此,我注意到我的应用程序在我的笔记本电脑上并不是非常活泼,并且由于速度的原因,在ipad上处理非常烦人.但是,无论何时在滚动期间删除或忽略文本元素,它都会立即达到适当的速度.
我尝试进行一些速度测试(非常粗略的测试,使用新的Date().getTime())并发现移动除了< text>之外的所有元素需要大约10 ms.但是,当< text>时,它需要~120 ms.元素包括在内.
我相信这是因为每个字母都呈现为矢量形状,并且需要大量的处理能力来计算这种复杂结构究竟阻碍了什么.
是否可以只嵌入文本,因此文本呈现为光栅图形,而不是形状？或者以其他方式提高渲染文本的性能？
我不需要背景透明度,我也不使用任何花哨的字体.
解决方法
您可以使用Canvas和
embed images into the SVG预渲染文本.我不知道这与文本元素渲染的比较一般,但是对于
our demos,这非常有效(请参阅“层次结构”示例中的投影 – 它们首先渲染到画布中然后从SVG内复制和引用).
请注意,这些演示也会大量使用虚拟化,即如果放大图像并且只有部分元素实际位于视口内,则其他元素将从SVG中移除,这会带来巨大的加速.
演示不仅仅是移动元素,因此应该很容易获得相同甚至更好的性能.
我不知道如何用raphael做到这一点,但我相信你应该能够将画布图像中的数据网址放入带有raphael的SVG中.
