javascript - 渲染图像操作哪个更快：HTML5 画布元素，或使用 JS/jQuery 操作 DOM 元素的 CSS？

Question

如果我有多个（可能多达十几个）图像要对其进行更改位置、调整大小、淡入和淡出以及旋转等操作，我认为我的选项是 Flash（我真的不想使用） , <canvas>, 或者很多<img>标签和jQuery。

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

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

Answer 1

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

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

如果您只需要触发操作，请使用 jQuery。

Answer 2

正如您所说，这取决于浏览器。js/jQuery 方式适用于除旋转之外的所有浏览器。HTML5 Canvas 不适用于旧浏览器，例如 IE 6、7、8（请参阅http://caniuse.com/#feat=canvas）。Flash 可能无法在大多数手机上运行，​​需要下载。