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

标签 javascript performance canvas svg

我正在开发一个应用程序,该应用程序将显示类似于 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/

相关文章:

javascript - 使用 SmartSheets API,循环遍历函数变量列表

c++ - 有没有办法定义 "alternate"字符串终止符(除了空终止符,\0)

javascript - 仅 Android 浏览器 : canvas. toDataURL 抛出未捕获错误:SecurityError:DOM 异常 18

Facebook 将应用程序从 Canvas 页面重定向到粉丝页面

java - 列表比较算法复杂度的改进

android - 重绘 Canvas ,用于更新然后在其上设置文本不起作用

javascript - 在声明的函数中使用 'this' 时严格违反,不违反函数表达式

javascript - 如何使 Three.js FOV 响应高度和宽度?

javascript - jquery .next() 和 .prev() 在同一个 div 中

php - 返回数组比返回数组的元素更快