小程序加载很慢怎么办？该如何优化改进？这是很多小伙伴们关心的话题。下面，IT工作室创始人王晴儿就以自己多年资深互联网从业者的经验，和大家探讨一下这个问题！

1.问题描述

01.问题现象

小程序首次打开首屏加载非常慢，超出用户等待时间。

02. 理想装载

理想情况下，加载时间不应超过5秒，并且数据渲染不应出现任何滞后。

2. 加载机制

首屏加载速度除了和网络有关，还和小程序本身的启动机制有关。首先需要了解小程序的启动机制。小程序的启动分为冷启动和热启动。

01.冷启动

介绍：如果用户第一次打开小程序，或者小程序被销毁后被用户再次打开，小程序需要重新加载并启动，这就叫冷启动。

触发场​​景：新用户首次进入小程序

用户已经进入小程序，但是小程序被销毁了，销毁的原因包括：小程序被删除、小程序在后台等待时间过长被自动销毁。

02. 热启动

介绍：如果用户打开过小程序，在一定时间内再次打开，小程序并不会被销毁，只是从后台状态进入前台状态，这个过程我们称之为热启动。

触发场​​景：用户打开小程序，在小程序销毁前，再次打开小程序，此时小程序还能保存用户最后一次的操作状态。

首屏加载慢的主要原因是冷启动时加载的数据过多，需要过多依赖服务端界面数据。

3. 检查

对于程序员来说，遇到问题就应该解决，首先需要做一些基本的检查：

01.检查图像

检查图像包括：

1. 图片是否太大？

检查图片属性，如果图片过大，就用工具压缩一下，这时候要考虑，如果对图片像素要求很高的话，要注意压缩不失真，其次要注意压缩的比例，注意图片大小是否被不小心剪裁了。

2. 图像延迟加载

如果首页有很多列表或者图片需要加载，要注意图片的加载时间，如果超过了一定时间，懒加载是个好办法。

3. 可以使用 CDN 托管图片吗？

小图标可以放在小程序项目文件夹中，但如果图片占用资源，将其托管在CDN上不仅可以减少代码包大小还可以提高加载效率。

02.检查进入首屏界面的时间

逐个检查每个接口，查看 中的加载时间，逐个排查原因，最好所有请求都在1秒之内返回结果。

03.检查错误日志

在JS中，如果同步任务出现错误，则整个后续代码都不会执行。

此时应检查是否有异常错误，避免首屏处于状态，必要时尝试处理。

04.检查接口是否使用定时器

定时器一般设置为全局变量，或者将定时器绑定到倒计时相关的函数上，使用定时器的时候一定要记得及时回收。

05.检查基础版本库

首页若使用自定义组件，不同版本在基础库中应保持一致，不同基础库对部分功能的支持情况可能不一致，需做好兼容处理。

4.优化策略

01. 以子包形式加载

开发人员在app.json字段中声明项目子包结构

{ "pages":[ "pages/index", "pages/logs" ], "subpackages": [ { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, { "root": "packageB", "name": "pack2", "pages": [ "pages/apple", "pages/banana" ] } ] }

分包之后，主Tab优先加载，次要界面可以理解为按需加载。

请注意，主包不能使用次级界面的样式或js，因为主包加载时，子包还未加载。

02.使用缓存

当小程序销毁需要重新渲染界面时，冷启动会重新请求接口加载数据，小程序可以使用缓存方法wx.和wx.将数据保存到本地。

03.不要使用空白屏幕

所谓黑屏就是当请求的接口数据没有返回的时候，整个界面都是空白的，用户感觉就像是白屏一样。

推荐做法：在数据未渲染完成的情况下，展示页面基本骨架，利用加载进度提示给用户反馈加载进度，会延长用户的等待时间。优先显示高优先级内容，缩短白屏时间；