微信小程序首页加载的优化
冷启动
如果用户首次打开,或小程序销毁后被用户再次打开,此时小程序需要重新加载启动,即冷启动。
触发场景
- 新用户第一个进入小程序
- 用户已经进入过小程序,但小程序被销毁(原因:小程序被删除或小程序在后台等待时间过长,自动销毁了)
首屏加载慢大部分原因是冷启动时加载的数据过多,需要依赖过多的服务端的接口数据等
热启动
如果用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时小程序并未被销毁,只是从后台状态进入前台状态,这个过程就是热启动。
触发场景:用户打开了小程序,在小程序没有被销毁时再次打开小程序,此时小程序还能保存用户上一次的操作状态。
优化方案
1 图片压缩,图片懒加载
2 分包加载
在 app.json subpackages 字段声明项目分包结构:
{"pages":["pages/index","pages/logs"],"subpackages": [{"root": "packageA","pages": ["pages/cat","pages/dog"]}, {"root": "packageB","name": "pack2","pages": ["pages/apple","pages/banana"]}]
}
分包之后优先加载主tab,二级界面可以理解为按需加载。
分包要注意,主包不能使用二级界面的样式或者js等,因为主包在加载时分包是不加载的。
3 利用缓存
当小程序被销毁需要重新渲染界面时,此时冷启动会再次请求接口加载数据,可以利用小程序提供的缓存方法 wx.setStorage
、wx.getStorage
将数据存储在本地。
4 不使用空白屏
空白屏就是当请求接口的数据没有被返回时,整个界面被 hidden
,此时给用户的感觉就是白屏。
推荐做法:此时可以利用toast
提示加载进度,给用户反馈出加载的进度,会延长用户的等待时间。
微信小程序首页加载的优化相关推荐
- 初级前端小程序项目加载速度优化
这份文字是根据近期团队做来问丁香医生 SPA 和 丁香医生小程序 加载速度优化的经历整理而成. 效果 古人有一句话叫做:治感冒看疗效.既然是关于速度优化的,我们就先来看一下优化的效果. 来问丁香医生 ...
- 微信小程序分包加载,分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
- 微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多 组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...
- 微信小程序,Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试?微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载 在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
- 微信小程序列表加载动画示例
微信小程序列表加载动画 微信小程序列表加载动画示例 实现思路 什么是动画? 导航栏设置 列表动画加载 完整代码demo 微信小程序列表加载动画示例 初学微信小程序开发,记录一下.网上找了很久这种效果, ...
- 微信小程序上传视频到服务器太慢,微信小程序视频播放加载很慢
- 当前 Bug 的表现(可附上截图) - 预期表现 - 复现路径 - 提供一个最简复现 Demo 微信小程序视频播放加载很慢,一直转圈,3分钟后才能播放,而且播放很卡,加了带宽和cdn也没有效果,官 ...
- 微信小程序踩坑日记-微信小程序首次加载样式错乱问题
微信小程序踩坑日记-微信小程序首次加载样式错乱问题 在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题 问题原因:-未知(估计是组件的问题) ↓ 解决办 ...
- 微信小程序web-view加载网页字体非常小的问题
一.问题如下图所示,微信小程序web-view加载网页的字体非常小: 二.问题解决,在网页中加上 <meta name=viewport content="width=device-w ...
- 微信小程序怎么取mysql_微信小程序如何加载数据库真实数据?
微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100tx ...
- 微信小程序 自动解决分包大小问题_微信小程序分包加载设置
设置分包加载 微信小程序分包限制为: 主包或者单个分包最大为2M 整体小程序所有包最大为8M 为什么需要设置分包? 小程序项目中,有多种角色(公共页面很少),设置分包加载方便管理 整个小程序压缩后代码 ...
最新文章
- 2022-2028年中国钢铁智能制造产业竞争现状及发展趋势分析报告
- 运维需要掌握的基础知识
- Angry IP Scanner 获取设备的IP
- Makefile_07:Make 的工作方式
- Java Date 日期 时间 相关方法
- Codeforces1142D
- python学生类出不来中文_Python 这类看起来学习门槛低的语言,是否真的适合入门编程学习?...
- QThread Class
- H3C VLAN显示及维护
- android kill process,为什么Application有时会在killProcess上重启?
- 话单数据仓库搭建(1)- 数仓概念及数据采集
- php加skplayer,织梦dedecms怎么整合添加ckplayer播放器支持flv,mp4等播放功能
- opencv获取图像的像素值
- 多元线性模型的分位数回归
- spring中 allowBeanDefinitionOverriding(spring.main.allow-bean-definition-overriding)原因分析、解决办法
- BBS中用SSH方式登录添加附件
- js正则表达式 URL格式匹配详解
- 计算机qwerty键盘,QWERTY键盘输入
- android pie新功能,Android Pie:3个隐藏功能 | MOS86
- 阴阳师最新的服务器,阴阳师6月30日正式服务器更新内容一览