javascript - Web 应用程序性能：SVG、Canvas 或 Dom 操作

Question

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

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

（我看到了这个问题，但是我看到的链接没有给出两个Canvas 与 SVG 动画（效果 [过滤器] 和性能）的高级性能比较）

哪种网络技术可以为我提供这种渲染和操作的最佳性能？画布绘图、SVG 或 div/Dom 操作？

Answer 1

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

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

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

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

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

当然，我的所有意见。