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

2019-12-24 21:03:02 +08:00
 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 页。

5604 次点击
所在节点    程序员
64 条回复
Mutoo
2019-12-25 23:17:13 +08:00
@xiaoming1992 texture 的 frame buffer 只需要创建一次,之后只要重复调用 drawcall 就行了。后者开销几乎忽略不计。游戏引擎都是这么做的。
xiaoming1992
2019-12-25 23:29:52 +08:00
@Mutoo 感谢,那确实是我用错了,我是在循环中创建 texture 的,webgl 不熟,用错了,回头重新试试
signalas1
2021-08-24 16:32:16 +08:00
最后怎么办了楼主
xiaoming1992
2021-08-26 00:51:07 +08:00
@signalas1 好像是采用的楼上的,页面加载时将需要的图片(缩略图和大图)全部加载完毕(浏览器会帮我们换存下来),旋转时用缩略图、停下后切换为大图。离职了,太长时间忘了。(其实这个事的瓶颈在于,高速切换图片时,浏览器需要将图片依次绘制到视口,即使图片有缓存,仍然会卡顿,图片越大,卡顿越明显。)

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/631987

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX