在做图片查看器的时候有个非常不好的体验，在于当image标签切换source的时候，由于我也同时根据窗口大小自适应调整了图片的大小，所以我需要修改样式，这个是通过vue的自动绑定修改的，但是没想到的是，image标签的图片切换，会比样式修改来的还慢。
这样导致的表现是，比如下一张图片是高度/宽度 > 1，目前这张则是个普通的横屏图片，切换到下一张时会明显看到图片被挤压成竖的。
我们当然可以通过先把图片隐藏，再修改样式后再显示图片的方式，但是这种明显闪一下的体验还是不够友好。
那么为什么图片的src切换要比样式的修改来的慢呢？我们来看一个chrome抓下来的渲染时序图：
有没有发现，在下面有个长长的Image Decode，说明对于大体积的图片，浏览器花了大量时间在解析这个图片的过程。
那么我们又没有办法通过监听这个decode完成事件，再来控制样式改变呢，其实是可以的。早在2016年，Github上就已经有相关issue在讨论这个问题：
https://github.com/whatwg/html/issues/1920
这个问题的结论是诞生了这个api：https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode
其实关注这个事情的时候我同时调研了下微信桌面端是怎么处理这个问题的，我发现微信对于这个事情的处理要区分三种：
- 图片还没有完全下载好，这种情况下就显示一个加载中，等下载完decode完再显示，加载的时候，显示的是缩略图
- 图片很大，decode需要时间，这种情况也是先直接显示个缩略图！然后再显示原图
- 图片不算大，本地也已经有了，直接显示就好了，当然这种情况体验是最好的