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上運行測試