我正在开发一个应用程序,该应用程序将显示类似于 Visio 的“框和箭头”图。有些元素是可拖放的。主要功能是不透明度、 Angular 连接线和一些动画过渡。
目标平台是 webkit 浏览器、iOS 平板电脑和 Android 平板电脑。
(我看到这个问题,但我看到的链接没有给出两者的高级性能比较Canvas versus SVG animations (effects[filters] and performance))
哪种网络技术可以为我提供此类渲染和操作的最佳性能? Canvas 绘图、SVG 或 div/Dom 操作?
最佳答案
Canvas :让您完全控制一切。您可以自己定义形状、文本和其他小部件。您可以控制像素级别。
SVG:为您提供大量可供使用的形状和效果。 SVG 采用 XML 格式,请原谅我的个人偏见,我最喜欢它。
DOM:可能是使用起来最棘手的,因为您必须解决跨浏览器兼容性问题,但代价是可以轻松地使用 CSS 和动画或其他 JavaScript 逻辑来表达效果。
性能?不太确定。您的目标平台范围相当广泛。您只需要进行一些实证或基准测试即可。
如果您使用常见的快捷方式(例如堆叠 Canvas 或在屏幕外绘图等),Canvas 可能会为您带来最快的性能。
当然,这都是我的意见。
关于javascript - Web 应用程序性能 : SVG, Canvas 或 Dom 操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11658163/