如何降低图片解码(Image Decode)时间？

[xiaoming1992]

伪代码如下：

// 分别有 36 张不同的图片，尺寸均为 2000*1000
const imgList1 = []
const imgList2 = []
const imgList3 = []

function render() {
  // i 会变化
  ctx.drawImage(imgList1[i], ...params)
  ctx.drawImage(imgList2[i], ...params)
  ctx.drawImage(imgList3[i], ...params)

  window.requestAnimationFrame(render)
}

render()

一个渲染循环大概 60ms，但是 Image Decode 就占据了 48ms，怎么能降低这个时间呢？明天上班上 demo 页。

[mxT52CRuqR6o5]

@xiaoming1992 video 肯定可以缩放啊，控制 video 的样式属性就好了啊，你是哪里没想明白

[andyzhshg]

准备一套小图资源，旋转的时候如果没有对应的大图就渲染小图，大图 load 完了在替换成大图。全景图的展示都是这个路数，算是最简化版的 LOD。

[ltq918]

ctx.drawImage 在画布中载入全部图片，然后通过调整图片大小、位置或遮罩模式来显示要显示出来的图片，隐藏其他图片

[omph]

贴图慢，像游戏一样建 3D 模型
[3DCloud，照片建模的开创者！有照片，就有模型！]( http://www.3dcloud.cn/)
我编不下去了

[ltq918]

不在载入图片环节循环，在调整图片显示模式环节循环

[ltq918]

用 threejs 模型不好弄吧

[mxT52CRuqR6o5]

刚刚实测，设置 video 元素的 transform 样式就能控制缩放，设置 video 元素的 currentTime 属性就能控制展示第几张图片

[mxT52CRuqR6o5]

刚查了一下浏览器似乎放不了带 alpha 通道的视频

[xiaoming1992]

@mxT52CRuqR6o5 currentTime 同样受不了每秒 20+次的切换，一样卡顿

[xiaoming1992]

@ltq918 #43 ctx.drawImage 在画布中载入全部图片，然后通过调整图片大小、位置或遮罩模式来显示要显示出来的图片，隐藏其他图片

图片从隐藏到显示同样需要解码啊

@mxT52CRuqR6o5 对于 video，一些操作（例如自动播放）属于敏感操作，不同浏览器、不同设备可能会有不同的执行策略，所以我个人不太喜欢 video。

[xiaoming1992]

@omph 说实话，看他们首页的 demo，就有点看不下去了 ToT

[mxT52CRuqR6o5]

@xiaoming1992 给 video 个 mute 属性就没有限制了，各种各样的限制规则是限制有声视频的，用视频对网络很友好，因为能压得很小，要不要用你自己衡量就是了

[xiaoming1992]

@mxT52CRuqR6o5 相同清晰度，相同帧数，视频应该大于图片吧？我曾经碰到过微信（还是 QQ ？）内置浏览器，在 touchstart （或者 touchend ？）事件中调用 play()方法无效，部分浏览器在非 wifi 环境播放视频时会弹出“播放视频将消耗大量流量”的提示，所以个人不太喜欢 video。

[mxT52CRuqR6o5]

@xiaoming1992 如果有国产各种魔改版的手机浏览器用 video 确实不太好
相同帧数视频肯定是图片小的，所以 chrome 才会给静音视频开自动播放的口子。最开始没开这个口子时，有些网站会尝试使用 gif 来做自动播放，导致用户流量消耗更大体验更差

[ltq918]

@xiaoming1992 对已载入的图片进行变换位移等操作似乎不会增加 Image Decode 时间

[ltq918]

使用 setInterval(）替代 window.requestAnimationFrame(render) 能进一步提高帧速率，但会影响效能

[xiaoming1992]

@ltq918 就算图片已经载入，只要不在视口，浏览器就很可能会清除掉 decode cache，好像某乎有篇文章介绍过，忘了。

[xiaoming1992]

@ltq918 setInterval 不是会掉帧还是怎么的吗？体验应该不会比 rAF 好啊

[Mutoo]

最佳作法是 webgl + frame buffer，把图像上传到显卡，需要的时候直接调用显卡的 draw call 显示出来。

[xiaoming1992]

@Mutoo 最开始用的就是 webgl，需要频繁切换 texture，比这个性能还差。。。或许是我 webgl 不精吧