SVG VS帆布（Snap.svg VS FabricJS）

Question

我做了一個SPEEDTEST到Snap.svg（SVG）比較FabricJS（帆布）： http://jsbin.com/tadec/7function dummy()。

在Chrome中，SVG渲染時間爲120毫秒，而CANVAS渲染時間爲1100毫秒。 SVG比CANVAS快9倍。

Fabricjs.com頁面在this example中說Raphael需要225毫秒，Fabric需要97毫秒（解析：80，渲染：17）。

我有一個印象（閱讀fabricjs.com和paperjs.org）FabricJS和更一般的Canvas比SVG更快。

我的速度測試聲稱SVG比Canvas快得多（至少Snap.svg似乎比FabricJS快得多）。

爲什麼FabricJS在我的測試中太慢了？我是否犯了一些錯誤，因爲我驚訝SVG在速度測試中似乎比帆布快。

編輯：我的問題是兩部分：爲什麼渲染速度在FabricJS中速度如此之慢以及爲什麼還要拖動速度？

Answer 1

您的基準測試在我看來是打破的，因爲除了測量繪製到畫布之外，您還在測量一個包含路徑的巨大字符串的解析，一遍又一遍。將這段代碼從循環中分離出來，你應該得到更可靠的結果。

提供給畫布庫的測量用於繪製，而不是用於解析或其他預處理工作。如果你像使用SVG一樣使用畫布，那麼是的，它會變慢。它不打算像SVG一樣使用。 FabricJS提供了這樣做的方法，但它並不是最優的。一種解決方法是解析一次路徑，然後反覆使用相同的路徑，而不是每次都解析它。

此外，測量可能是繪製一個畫布，而不是與零件相互作用。正如你在評論中所說的那樣，渲染可能會得到改善，但爲什麼拖動一個形狀需要更長的時間？因爲：

1. 也許路徑上每個被重繪（不知道FabricJS是如何工作的）重新分析
2. 因爲SVG可以重繪要移動圖像的某些部分，帆布通常是完全重新繪製。爲什麼？因爲你無法「抹去」曾經是形狀的部分畫布。所以整個畫布都被擦掉了，新的位置被重新繪製。

那麼爲什麼人們說canvas對於這樣的場景比SVG快呢？因爲它是如果你正確使用它。這將是更多的工作，但它會更快地工作。

1. 不要使用SVG路徑繪製形狀，或使用簡單的路徑，並緩存你經常使用到離屏（隱藏畫布），然後複製從畫布到畫布上可見時
2. 緩存形狀需要
3. 如果您有多個圖片的獨立圖層（例如遊戲中的3層，如果您有移動的背景天空，移動較慢的背景山脈和字符），請使用多個畫布。將畫布放在另一個上面，在底部畫布上繪製天空，在第二個畫布上繪製山脈，並在頂部畫布上繪製角色。這樣，當頂部畫布上的字符移動時，您不必重繪整個背景。

我希望我的回答對你:)是有用