如何降低图片解码(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 页。

[zhs227]

每次 decode 的都是相同的图片吗，如果是，可以先保存 decode 的结果

[dawn009]

Decode 应当只在「从磁盘到内存」的过程中进行一次。不需要在循环中重复解码过程。

[xiaoming1992]

@zhs227 都是不同的图片。。。

@dawn009 但问题是浏览器他就是重复解码了啊

[luozic]

听说过缓存和预加载么？

[dtysky]

来用压缩纹理吧(逃

[111qqz]

来用显卡解码吧(

[dawn009]

@xiaoming1992 #3 imgList 里的 image sorece 是文件 URL 吗？
试试先用 createImageBitmap 预读成 ImageBitmap，然后用这个当作 drawImage 的参数

[xiaoming1992]

@dawn009 createImageBitmap 确实没用过，但是看 MDN 兼容性一片红，不太敢用啊，imgList 里面是 new Image()出来的 png 图片。

@luozic 不太清楚你说的缓存和预加载是什么意思

@111qqz 前端如何使用显卡解码？

@dtysky 简单查了一下，还没看懂压缩纹理是什么，明天仔细查查吧。

谢谢各位

[sx90]

全部加载干嘛？

显示器分辨率就这些

一般壁纸网站，全加载小图，点击查看高清图，或下载

地图网站，也是先 ip 定位，小图加载，拼接而成

图片如果是固定，可以缓存，第一次慢，后面就快
HTTP/Caching_FAQ （新人发不了网址，自己搜吧）

不固定的，自动工具切成小图，再加载

[yixiang]

这是……要用 canvas 放 40k 的视频？

1. 不需要这么高的分辨率吧
2. gif 了解一下？

[xiaoming1992]

@sx90
@yixiang
其实是环物展示，需要在大屏上展示，如果需要放大的话，2000*1000 还嫌小了呢。。。需要响应手动操作，所以 gif 可能不合适

[chuxiaonan]

提个想法 不知道适合不 off screen 渲染如何

[mxT52CRuqR6o5]

展示机你们控制不了吗？兼容性一片红又无所谓，把浏览器升级就是了，又不是放到公网上提供个各种不同的用户使用
其他方法可以试试转图片格式或转成视频

[xiaoming1992]

@zhs227 @dawn009 @luozic @dtysky @111qqz @dawn009 @sx90 @yixiang @chuxiaonan

抱歉打扰了，附言中已更新了 demo 和演示 gif

[xiaoming1992]

@mxT52CRuqR6o5 大哥，就是放到公网上啊，要做 toC 的啊。。。

[mxT52CRuqR6o5]

@xiaoming1992 你前面说放到大屏展示我就以为没有 toC 需求，你那个 demo 不是性能挺好的啊

[xiaoming1992]

@mxT52CRuqR6o5 我做了 hack，转的时候只绘一层，，性能勉强可以，但是体验就不好了

[Michaelssss]

无非是空间换时间吧。。比方说你把所有的 image.decode()提前 cache，你本身是要避免 decode 这操作吧

[xiaoming1992]

@Michaelssss 由于大部分图片长时间不在视口中，decode 信息缓存不住，浏览器不时会清理掉

[mxT52CRuqR6o5]

@xiaoming1992 体验不好是指开发体验还是用户体验？这个需求优化要么空间换时间，把所有图片都渲染出来，用 z-index 或 transform3d 控制最上面的展示图片（手机上可能会炸），要么尝试把所有图片合成视频