# 小程序开发指南之性能优化

作者:HerryLo (opens new window)

原文永久链接: https://github.com/AttemptWeb/Record... (opens new window)

将从代码层面项目层面,聊一聊微信小程序的性能优化问题,希望有所帮助。也是自己最近的一个总结。(前置知识:微信小程序的视图层是WebView支持,逻辑层是JSCore支持,逻辑层通过setData与视图层发生交互。每一个页面都是一个WebView页面)详见:小程序的运行环境 (opens new window)

下面的内容不论是使用Taro框架开发,还是微信小程序原生开发,都是适用的。

# 代码层面

通过代码细节提升性能,而且在这方面,空间是非常大的。对于比较早期的小程序项目,由于代码细节方面没有过多的考虑,也导致了开发出的小程序非常的消耗性能。下面将提到的一些点,不论是正在开发的项目,还是在维护的项目,都会有一定的帮助。

# 👇· 拆分组件

对于小程序的项目,由于野蛮式开发,不会太多的考虑组件拆分。当然对于关注组件开发的公司,肯定会在早期就做好一定的规划。做好组件的拆分,可以保证组件的复用,大量的减少重复的代码。(组件开发的思想,目前基本适用所有的前端开发项目)。如何有效拆分组件方法,详见[译] 你是如何拆分组件的? (opens new window)

# 👇· 图片压缩

在微信小程序项目中,不会在本地存放图片,基本都是网络图片,而网络图片的下载,需要消耗一定的时间和内存。较小图片的大小,可以提升小程序的渲染时间,减少内存的占用。通过CDN静态资源服务器获取图片资源,添加图片压缩规则,可以极大的提升性能。

# 👇· 减少不必要数据

减少data中的亢余数据。不必要数据,传入setData会造成不必要的性能消耗。建议:不要直接将接口数据全部保存在data中,只有页面需要渲染的 数据,才通过setData进行挂载,非必要的数据可以直接挂载在当前页面page的this上。

let data = {
    list: [item, item, item, item, item],
    title: "xxxx",
    path: 'xx/xx/xx'
}
1
2
3
4
5
// ❌不好的处理
this.setData({
    data: data
})

// 👌好的处理 只挂载必要参数
this.setData({
    dataList: data.list
})
this.title = data.title
this.path = data.path
1
2
3
4
5
6
7
8
9
10
11

# 👇· 避免频繁setData

// ❌不好的处理
this.setData({
    count: 1
})
this.setData({
    count: 2
})
this.setData({
    count: 3
})
1
2
3
4
5
6
7
8
9
10

三次setData会被全部触发嘛?是的,会被全部调用

在微信小程序中,并不像react,把多次操作合并。每次setData的过程,就是一次JSCore逻辑层 和 webView视图层的交互。过多的交互,会降低小程序的用户体验。例如 滑动监听滚动,操作setData,非常的消耗性能,可以考虑使用节流函数,降低调用频率。

官方给出的说法是:setData接口的调用涉及逻辑层与渲染层间的线程通信,通信过于频繁可能导致处理队列阻塞,界面渲染不及时而导致卡顿,应避免无用的频繁调用。来修改一下上面的代码。

// 👌好的处理
let data = { count: 1 }
data.count = 2;
data.count = 3;
this.setData(data)
1
2
3
4
5

# 👇· webView组件开发

灵活性非常强的页面,同时需要多端使用,建议使用微信小程序提供的webView组件,套用h5页面进行页面开发,避免重复开发。当微信小程序包过大之后,也建议使用h5页面替换开发。详见webView 组件 (opens new window)

<web-view src="{{link}}" bindmessage="bindMes" bindload="bindLoad"/>
1

# 项目层面

通过微信小程序项目配置来提升加载性能,下面的方案可以有效的解决问题,不过也要试情况而定。

# 👇· 拆分小程序

在包过大的情况下下,可以进行小程序包的拆分,详见:分包加载 (opens new window)。对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。如果业务庞大,也可以单独抽离一个新的小程序。

# 👇· 分包预加载

采用分包配置之后,分包加载也是需要时间的。对于一些比较常用,或者比较重要的页面,可以采取分包预加载的手段,来完成分包的提前下载,减小分包载入的时间。详见 分包预下载 (opens new window)

# 👇· 尽量升级版本库

注意基础版本库的问题,在合适的前提下升级版本库,尽量将版本库升级为最新版本。因为版本库升级为最新,可以有效避免很多问题。

目前随着各大公司业务的不断迭代,小程序的体积不断真大,小程序渐渐的不在小。请让小程序尽量的小起来,发挥它小的作用。希望以上内容可以帮到你。

更多内容:

'小程序个人开发指南 (opens new window)

ps: 微信公众号:Yopai,有兴趣的可以关注,每周不定期更新,分享可以增加世界的快乐

🥰Me

男性,武汉工作,会点Web,擅长Javascript.

技术或工作问题交流,可联系微信:1169170165.

🚀小程序&公众号
🚀运行
2024年2月19日星期一下午2点01分
博客已运行:--天--时--分--秒
上次更新: 7/18/2023, 6:00:41 PM

评 论: