小程序常用优化手段

Posted 前端学习123321123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序常用优化手段相关的知识,希望对你有一定的参考价值。

小程序常见优化策略

最近也开发了两个小程序,在开发的过程中,总结一些优化心得

  1. 理解wx:if和hidden,并合理利用,官方文档中并没有明确说出hidden如何使用,要不是wx:if文档中提到,经常切换显示和隐藏的节点建议使用hidden,我都不知道还有这个属性。wx:if每次在显示的时候会重绘,而hidden不会。在我开发的项目中,有一个自定义的TabBar,使用hidden和wx:if会有明显的差异。

  2. Input状态下隐藏input,应预留出键盘收起的时间,具体情况类似下图当点击页面中的取消按钮,页面输入框和mask会消失,因为输入框会消失,引起键盘收起。此时页面会有明显的抖动重绘。我的解决办法是点击取消后,先让键盘消失(大约500ms),再去隐藏input,体验会好很多
    技术图片

  3. 如页面图片过多
    小程序对用户内存使用进行了限制,如果一个页面的图片过多,会导致内存不足的内部错误,导致应用直接崩溃。解决方法,懒加载

  4. 图片预加载,在浏览器中常用的预加载方法,创建隐藏的image标签,在其他动态的image中如过同时使用此图片,微信会从缓存中读。

  5. 安卓下,没有异步操作,调用hideLoaing后,loading不会消失,猜测原因是showLoading还没有执行完,就调用hideLoading,导致hide失效

wx.showLoading
  同步代码
wx.hideLoading

遇到这个问题的原因是,我习惯在onLoad函数中处理当前页面的所有异步请求和数据,所以习惯性的在所有页面的onLoad函数中都写上了loading,但是有一个页面中,并没有请求,而且从storage中读的数据。在ios下,没什么问题,但在安卓下,loading不会消失。

有很多在Page对象生命周期上加预加载方法的,做接口预加载,但我认为这并不是一个好的优化点,可以在某几个高频页面尝试做,大范围的应用就实在不好了,随时可能被微信咔嚓

常规的一些优化手段,比如压缩代码,合并雪碧图也都是可以使用的。但在有些情况下,比如特别常用的小图标(自定义tabbar上的图标),建议用base64写在CSS中,虽然base64解析慢,但比网络加载图片要快的多。

合理利用各种优化手段,提升小程序体验。你一定会问,什么是合理那?这个只有自己拿捏了,没有思考和实践,查来看去也只能学会一些常规优化套路。要想做深度优化,必然要对业务场景和逻辑有深入理解。

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=h00c1hahj0j

以上是关于小程序常用优化手段的主要内容,如果未能解决你的问题,请参考以下文章

常用的图片优化手段

提效小技巧——记录那些不常用的代码片段

游戏常用图形渲染优化手段介绍!

常用的性能优化手段

php常用的优化手段

优化Python编程的4个妙招