Web應用程序性能：SVG，畫布或Dom操作

Question

我正在研究一個應用程序，該應用程序將顯示類似於Visio的「方框和箭頭」圖。一些元素是可拖放的。主要特點是不透明，有角度的連接線和一些動畫過渡。

目標平臺是webkit瀏覽器，iOS平板電腦和Android平板電腦。

（我看到了這個問題，但我看到的鏈接不給兩個Canvas versus SVG animations (effects[filters] and performance)高水平的性能比較）

什麼網絡技術將會給我這樣的渲染和操控性能最好的？畫布繪圖，SVG或div/Dom操作？

Answer 1

帆布：給你完全控制一切。你可以自己定義你的形狀，文本和其他小部件。你有像素級別的控制。

SVG：爲您提供了大量使用的形狀和效果。 SVG採用XML格式，原因是我個人的偏見 - 我最喜歡它。

DOM：可能是最棘手的問題，因爲您必須與跨瀏覽器兼容的問題進行鬥爭，但是交易的方式是使用JavaScript和動畫或其他邏輯輕鬆表達效果。

表現？不太確定。您的目標平臺範圍相當廣泛。你只需要做一點經驗或基準測試。

如果您使用常見快捷方式（如堆疊畫布或在屏幕外繪圖等），畫布可能會使您獲得最快的性能。

當然我所有的意見。