Canvas与DOM - HTML5中最有效的图像显示方法是什么?

时间:2012-06-08 15:00:15

标签: performance html5 canvas image

StackOverflow用户

在制作html5应用程序/网站时,对于图像库这样的情况,在浏览器中按顺序或同时显示大量图像,是否使用了canvas元素?

只要我们只讨论呈现图像,使用画布并在其上绘制图像而不是使用DOM元素是否有任何意义。 img>标签? 还会有一些图像处理,比如CSS3变换/移动/缩放/缩放和手势识别(拖动,触摸/点击,可能是捏等),据我所知,它们适用于画布和img标签

同样重要的是尽可能多地保持“html5” - 并尽量考虑性能。 例如,如果将来浏览器元素将越来越多地被浏览器使用和优化,那么它是否重要,并且如果暂时是< img>更快。

由于我们正在考虑开发一个通用的html5应用程序,在桌面和移动设备上工作,性能和速度是一个非常重要的因素。但是,测试比较canvas和< img>主要针对javascript浏览器游戏。在这种情况下,动画并不像内存消耗和整体性能那么重要。

是否有关于这个特定方面的资源/研究?

1 个答案:

答案 0 :(得分:1)

UseCanvas = NeedCanvas ? true : false

你真的不需要画布用于这个操作,并且用canvas进行开发需要更长的时间,因为它要复杂得多。

使用带有javascript的<img>标签不仅可以提高兼容性,还可以提高速度和可访问性 - 绝对可以通过浏览器运行CSS和Javascript。此外还有SEO因素,我很确定画布中的图像不会被索引。

为了使用HTML5技术,请勿使用HTML5技术。当你想开始扭曲图像并让用户在上面绘图以便你可以导出/保存时,你需要画布。