渲染图像操作哪个更快:HTML5画布元素，还是操作DOM元素? 'CSS与JS/jQuery

Which is faster for rendering image manipulations: HTML5 canvas element, or manipulating DOM elements' CSS with JS/jQuery?

本文关键字：操作元素 DOM jQuery JS CSS HTML5 布元素图像更新时间：2023-09-26

如果我有多个(可能多达一打)图像，我想做的事情，如改变位置，调整大小，淡入淡出，旋转，我认为我的选择是Flash(我真的不想使用)，<canvas>，或大量的<img>标签和jQuery。

我确信这取决于很多因素——浏览器和它的布局引擎，但我想知道是否有可能概括这些方法中的一种可能比另一种更快。

我对浏览器兼容性不太感兴趣——这是一个艺术项目——所以速度是我真正关心的，因为我以前见过jQuery动画变得断断续续，我想避免这种情况。

如果你需要一个现代的浏览器，那么为了获得最佳性能，请使用CSS3过渡。

这些将在可能的情况下卸载到GPU，并将让浏览器处理淡出，旋转等，所有这些都是完全自主的。

如果你只需要触发动作，可以使用jQuery

正如您所说，这取决于浏览器。js/jQuery的方式将适用于除了旋转之外的所有浏览器。HTML5 Canvas不能在旧的浏览器上工作，比如IE 6、7、8(见http://caniuse.com/#feat=canvas)。Flash可能无法在大多数手机上运行，因此需要下载。