新闻动态

图片展示

小程序动画性能优化实践

发表时间: 2019-06-21 22:00:02

作者: 云指建站

浏览:

本文以一个实际上线的项目为案例,从初始方案的思考,到方案对比选择考量,再到最后的实践优化,向读者介绍了如何在小程序中优化一个动画,从而提升页面性能,对了解小程序基本运作原理和性能优化有一定的启发。

01

背景

该项目的诉求是实现一个3D效果的地球,并支持转动动画效果,但小程序不支持wx.downloadFile({
,
success(res) {
// 图片临时路径
console.log(res.tempFilePath)
}
})

上面列出了两个问题的解决方案,我们先来看下实际操作中图片预加载方案的是与非:

方案考量

图片预加载的两种方案(image组件预加载图片的方式,更为不可控。所谓的不可控是指,当我们的WebView
/>

view>

方案考量

1. 只展示当前image组件,通过改变组件的图片链接来更换图片。

由前面预加载方案的结论我们可以发现方案一不可行。

结论: 问题的根源在于小程序对图片的回收和微信的缓存机制,导致更换图片链接的时候会不可控的出现掉帧闪屏的现象。

2. 罗列所有的元素,通过控制图片显隐达到切换图片的目的。

这样看来我们只有方案二可以使用了,但方案二要多渲染DOM来更改某个元素,一条道路走到头。而小程序不是这样,没法一条路走到头,Native扮演着"桥"的角色来进行转发。这是我们在安卓上会感觉到卡顿的根本原因,因为会走一段"弯路"。

因此我们需要提高安卓下面的页面性能,而开启硬件加速成了一条捷径。我们把上述代码改成了如下方式:

<
   
<

   />view>

开启硬件加速后安卓确实不卡顿了,页面正常转动也可以左右滑动。但…苹果DOMDOM APIBOM API。因此它不能直接用wx.downloadFileiOSGPU

后台留言功能已开启,欢迎留言吐槽哦~


搜索公众号关注:微保技术

or

长按扫码可关注


请长按二维码,可加入我们哦!




文章内容如有侵权,请联系站长删除。

扫码加盟申请

友情链接

城市分站

热线电话
13922257259
上班时间
周一到周五
E-mail地址
251729397@qq.com
二维码
扫码关注
添加微信好友,详细了解产品
使用企业微信
“扫一扫”加入群聊
复制成功
添加微信好友,详细了解产品
我知道了