为了性能，请用Canvas而不是IMG

前些日子做了一个网站，是自适应式的网站（也有人叫响应式），带视差效果，大量的使用图片，并且我们做的网站一般考虑屏幕大小达到1920，以保证大屏浏览者依然能够看到清晰的图片。 于是问题就来了，自适应暂不说，只说这视差效果，要求在滚动页面时，页面里面绝大多数的图片能有一个位移或者旋转这样的动画，意味着要想浏览器达到60帧的帧频，程序必须质量够高，浏览器渲染页面的性能也要够高。

几个浏览器下测试做出来的页面，出人意料，一直认为性能最高的Chrome出现了问题，在滚动页面时帧频降到了10FPS以下，反而IE9+的性能相当高，尤其是IE10，非常流畅。问题出在了哪？在经过反复的测试后，终于发现Chrome下性能低的原因。

下面是在Chrome的调试工具里的看到了，很明显在我滚动页面时，IMG标签被多次解码，而这对性能的影响是非常明显的，尤其是页面中存在大量大尺寸图片时。

在我使用了Canvas代替了IMG之后，这种图片重复解码的问题就不存在了，而且性能提升非常明显，基本上能达到最大帧频。不过IE下Canvas似乎难以做自动等比缩放，所以IE下我继续使用IMG，正好IE下图片不存在这样的问题。