javascript - Web 应用程序性能 : SVG, Canvas 或 Dom 操作

Question

我正在开发一个应用程序，它将显示类似于 Visio 的“方框和箭头”图表。有些元素可以拖放。主要特征是不透明度、成 Angular 连接线和一些动画过渡。

目标平台是 webkit 浏览器、iOS 平板电脑和 android 平板电脑。

(我看到了这个问题，但是我看到的链接没有给出两者的高级性能比较 Canvas versus SVG animations (effects[filters] and performance) )

对于这种呈现和操作，哪种 Web 技术可以提供最佳性能？ Canvas 绘图、SVG 或 div/Dom 操作？

Answer 1

Canvas:让您完全控制一切。您可以自己定义形状和文本以及其他小部件。你有像素级控制。

SVG:为您提供大量可供使用的形状和效果。 SVG 采用 XML 格式，请原谅我的个人偏见——我最喜欢它。

DOM:可能是使用起来最棘手的，因为您必须解决跨浏览器的兼容性问题，但代价是使用 CSS 和动画或使用 JavaScript 的其他逻辑很容易表达效果。

性能？不太确定。您的目标平台范围很广。您只需要做一些经验或基准测试。

如果您使用常用快捷方式(例如堆叠 Canvas 或在屏幕外绘图等)，Canvas 可能会为您带来最快的性能。

当然是我的意见。