Web应用程序性能:SVG、Canvas或Dom Manipulation

Web App Performance: SVG, Canvas, or Dom Manipulation

本文关键字：Canvas Dom Manipulation SVG 应用程序性能 Web 更新时间：2024-02-29

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

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

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

什么样的网络技术能为我提供这种渲染和操作的最佳性能？画布绘制、SVG还是div/Dom操作？

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

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

DOM：可能是最难使用的，因为你必须解决跨浏览器兼容的问题，但折衷的办法是，用CSS和动画或其他逻辑用JavaScript很容易表达效果。

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

如果你使用常见的快捷方式，如堆叠画布或在屏幕外绘图等，画布可能会让你获得最快的性能。

当然是我的全部意见。