没有合适的资源?快使用搜索试试~ 我知道了~
首页微信小程序性能优化方案——让你的小程序如此丝滑
微信小程序性能优化方案——让你的小程序如此丝滑
需积分: 46 1.0k 浏览量
更新于2023-05-27
评论 1
收藏 425KB PDF 举报
首先,问一个问题,当用户点击小程序后发生了什么? (此图片来源于网络,如有侵权,请联系删除! ) 上图中的三个状态,我们经常遇到,它们分别对应小程序的下面三个状态: 有三个点的白屏(左侧): 下载代码包的阶段 没有三个点的白屏(中间): 业务代码注入和渲染的阶段 加载中(右边): 业务代码中异步请求数据 总的来说,小程序呈现到用户面前,实际上经历了下面两个阶段: 运行环境的加载 下载代码包 下面具体介绍这两个阶段: 运行环境预加载 这步是微信做的。微信会在用户打开小程序之前就已经准备好环境,用户点击小程序入口后,直接下载小程序的代码包即可。 下载代码包启动小程序 小程序代码包里面的代码,不是小
资源详情
资源评论
资源推荐

微信小程序性能优化方案微信小程序性能优化方案——让你的小程序如此丝滑让你的小程序如此丝滑
首先,问一个问题,当用户点击小程序后发生了什么?
(此图片来源于网络,如有侵权,请联系删除! )
上图中的三个状态,我们经常遇到,它们分别对应小程序的下面三个状态:
有三个点的白屏(左侧): 下载代码包的阶段
没有三个点的白屏(中间): 业务代码注入和渲染的阶段
加载中(右边): 业务代码中异步请求数据
总的来说,小程序呈现到用户面前,实际上经历了下面两个阶段:
1. 运行环境的加载
2. 下载代码包
下面具体介绍这两个阶段:
运行环境预加载运行环境预加载
这步是微信做的。微信会在用户打开小程序之前就已经准备好环境,用户点击小程序入口后,直接下载小程序的代码包即可。
下载代码包启动小程序下载代码包启动小程序
小程序代码包里面的代码,不是小程序的源代码,而是编译、压缩、打包之后的代码包。
下图中,左侧的“ 预加载 ”对应的是运行环境的预加载,右侧的“小程序启动” 对应的是下载代码包启动小程序。
(此图片来源于网络,如有侵权,请联系删除! )
小程序提供的运行环境,分为逻辑层(AppService)和 视图层(webView),逻辑层是执行javascript的地方,视图层是渲染页面的地方。当小程序的代码包下载完毕后,业务代码分别注
入逻辑层和渲染层。
提升加载性能的最最最关键性一点是,控制包的大小,这个也是微信官方的说法。
控制包的大小控制包的大小
提升体验最直接的方法是 控制小程序包的大小 ,基本上可以说,1M的代码包,下载耗时1秒左右。
控制包的大小的措施控制包的大小的措施
压缩代码,清理无用的代码
图片放在cdn
采用分包策略
分包预加载
独立分包(版本要求有点高)




















weixin_38557980
- 粉丝: 6
- 资源: 925
上传资源 快速赚钱
我的内容管理 收起
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助

会员权益专享
安全验证
文档复制为VIP权益,开通VIP直接复制

评论0