成都微信小程序开发之性能调优1

返回列表
来源：桔子科技，由本站于2022-10-14 编辑发布，已经有1个小伙伴看过这篇文章啦！

的来说，小程序呈现到用户面前，实际上经历了下面两个阶段：

 

运行环境的加载

下载代码包

 

下面具体介绍这两个阶段：

 

运行环境预加载，这步是微信做的。微信会在用户打开小程序之前就已经准备好环境，用户点击小程序入口后，直接下载小程序的代码包即可。

 

下载代码包启动小程序

小程序代码包里面的代码，不是小程序的源代码，而是编译、压缩、打包之后的代码包。

 

下图中，左侧的“预加载”对应的是运行环境的预加载，右侧的“小程序启动” 对应的是下载代码包启动小程序。

小程序提供的运行环境，分为逻辑层（AppService）和 视图层（webView），逻辑层是执行javascript的地方，视图层是渲染页面的地方。当小程序的代码包下载完毕后，业务代码分别注入逻辑层和渲染层。

 

提升加载性能的最最最关键性一点是，控制包的大小，这个也是微信官方的说法。

 

控制包的大小，提升体验最直接的方法是控制小程序包的大小，基本上可以说，1M的代码包，下载耗时1秒左右。

 

控制包的大小的措施，压缩代码，清理无用的代码，图片放在cdn，采用分包策略，分包预加载

 

独立分包（版本要求有点高）

 

除了上面讲的控制包的大小，对异步请求的优化也很重要。

 

对异步请求的优化，onLoad 阶段就可以发起请求，不用等ready，请求结果放在缓存中, 下次接着用

 

先反馈，再请求。比如说，点赞的按钮，可以先改变按钮的样式，再 发起异步请求。

 

 

提升渲染性能setData 。每调用一次setData, 都是逻辑层向渲染层的一次通讯，这个通信还不是直接传给webView, 而是通过走了native层，通讯的开销很大。

 

渲染层收到通讯后，还需要重新渲染出来，所以，emmm, 一次setData带来两次开销：通信的开销 + webview更新的开销。


关键词： 成都小程序开发
18980020603
立即咨询

猜你喜欢