收藏
回答

image组件不同场景下使用为什么性能差异那么大?

同样读取一张600X800的jpg本地图片,页面绑定Image.src的读取显示速度与后台脚本读取差异非常大

后台脚本读取代码:

 const canvas = wx.createOffscreenCanvas({type: '2d', width: width, height: height})

  const context = canvas.getContext('2d')

  const image = canvas.createImage()i

  await new Promise(resolve => {

    image.onload = resolve

    image.src = imageURL

  })

  context.drawImage(image, 0, 0, width, height)

在华为P50 pro机子上,就是上面 await promise这段多数时候需要2秒以上,而且即使每次读取同样的一张图时间差异也比较大,起码有1秒左右浮动,很不稳定,即使以上代码的OffscreenCanvas换成普通页面的Canvas也一样。而页面image组件绑定src属性则非常快读取解码并显示出来。有哪位大大能帮忙解释一下?或者脚本读取代码怎么优化才能提高读取速度呢?image组件的图片读取与解码的实现是怎样的?是否有利用到native或者硬解码的能力?是否可以暴露出API来供脚本调用?(像HTML image decode?)

回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员-Jahozheng
    社区技术运营专员-Jahozheng
    2023-03-09

    可能的原因是OffscreenCanvas的性能问题,它在不同设备上的表现会有很大的差异。另外,使用createImage()方法创建Image对象后,需要等待图片加载完成才能进行绘制,这也会导致一定的延迟。

    2023-03-09
    有用
    回复 6
    • 麦芽糖
      麦芽糖
      2023-03-09
      谢谢回答!换成Canvas也有问题,主要性能问题就是在图片加载那里(await new Promise那段),太慢了
      2023-03-09
      回复
    • G-STEPS街舞工作室
      G-STEPS街舞工作室
      2023-03-09回复麦芽糖
      如果有可能的话,可以在进页面的时候,直接把图片写到页面上,用绝对定位给弄到可视区域外边去,提前加载。后续canvas就能直接走本地缓存了
      2023-03-09
      回复
    • 麦芽糖
      麦芽糖
      2023-03-09回复G-STEPS街舞工作室
      image可以提前加载好,但canvas怎么利用这个image呢?现在好像selectComponent与SelectorQuery都获取不到image组件的noderef(只能获取到canvas的),所以canvas也利用不到这个提前加载好的image
      2023-03-09
      回复
    • 麦芽糖
      麦芽糖
      2023-03-09
      脚本读取代码里面,image.src指向是本地的图片,按理加载速度应该不成问题的(如果是页面的image就很快),就是搞不懂怎么会这么慢
      2023-03-09
      回复
    • G-STEPS街舞工作室
      G-STEPS街舞工作室
      2023-03-09回复麦芽糖
      我简单的理解是图片提前下载好,第二次去读同一张图片的时候,不用再从网络下载了,请求会直接memory cache。感觉你的情况更复杂一些,感觉像是canvas要把图片整个都读取一遍比较慢
      2023-03-09
      回复
    查看更多(1)
登录 后发表内容