2、启动速度优化：小程序启动流程分析，冷启动与热启动的区别，缩短首屏渲染时间

大家好，我是老张。今天我们来聊聊小程序启动速度优化。

说实话，启动速度是用户对小程序的「第一印象」。你想想看，用户点开你的小程序，结果白屏好几秒，他大概率就直接划走了。我在项目中遇到过好几次，明明功能做得不错，就因为启动慢，用户留存率一直上不去。后来痛定思痛，专门花了一周时间死磕启动优化，效果立竿见影。

2.1 小程序启动流程全解析

要优化启动速度，首先得搞清楚小程序到底是怎么启动的。我习惯把启动流程拆成三个阶段：

1. 代码包下载与解压：用户点击后，微信客户端从 CDN 拉取代码包，然后解压到本地。
2. 引擎初始化：微信客户端创建渲染层和逻辑层的 WebView，并初始化 JS 引擎。
3. 首屏渲染：加载 app.js、page.js，执行生命周期，最终渲染出第一帧画面。

嗯，这里要注意一个关键点：渲染层和逻辑层是分开的。渲染层跑的是 WebView，逻辑层跑的是 JSCore（iOS）或 V8（Android）。两者通过微信的 Native 层进行通信。说白了，这就是小程序「双线程模型」的核心。

2.2 冷启动 vs 热启动：区别比你想象的大

很多同学分不清冷启动和热启动。我简单解释一下：

启动类型	定义	典型场景	耗时
冷启动	小程序进程被完全销毁后，重新启动	用户首次打开、主动杀掉进程后打开	较长（1-3秒甚至更久）
热启动	小程序进程仍在后台，直接切回前台	用户从聊天列表切回小程序、5分钟内再次打开	极短（200-500ms）

为什么会这样？因为热启动时，代码包已经在内存里了，WebView 和 JS 引擎也还活着。你想想看，省掉了下载、解压、初始化这三个大头，速度自然快得多。

我记得有一次做性能排查，发现某个页面冷启动要 4 秒，热启动只要 300 毫秒。当时我就意识到：优化冷启动才是重中之重。热启动再快，用户第一次打开体验不好，照样留不住人。

2.3 缩短首屏渲染时间的实战技巧

好，理论讲完了，咱们来点干货。怎么缩短首屏渲染时间？我总结了四个方向：

2.3.1 控制代码包体积

代码包越大，下载越慢。微信官方限制主包不超过 2MB，但我的建议是：能压到 1MB 以内就别超过 1MB。

• 分包加载：把非首屏页面、低频使用的组件扔到分包里。主包只保留首页、核心公共库。
• 图片外置：不要把小图标、背景图放在代码包里。全部上传到 CDN，用网络图片加载。
• Tree Shaking：去掉没用到的代码。比如你只用了 lodash 的 debounce，就别把整个 lodash 引进来。

// 错误示范：引入整个库
import _ from 'lodash';

// 正确做法：按需引入
import debounce from 'lodash/debounce';

2.3.2 优化首屏数据请求

首屏渲染往往需要请求接口。如果接口慢，页面就白等着。我的做法是：

• 预请求：在 app.onLaunch 里就开始请求首页数据，而不是等到 page.onLoad 才发。
• 缓存优先：把首页数据缓存到 Storage 里。下次冷启动时，先展示缓存数据，再异步更新。
• 减少请求数：能合并的接口就合并。一个接口返回所有首屏数据，比拆成三四个接口快得多。

2.3.3 减少同步操作

小程序里有些操作是同步阻塞的，比如 wx.getStorageSync、wx.getSystemInfoSync。这些操作会卡住渲染线程。

• 能用异步就别用同步。wx.getStorage 比 wx.getStorageSync 更友好。
• 如果必须同步，尽量放到 app.onLaunch 里提前执行，别拖到页面渲染阶段。

2.3.4 延迟加载非关键资源

首屏只渲染用户第一眼能看到的内容。其他内容，比如底部的广告、第二屏的列表，统统延迟加载。

// 示例：使用 IntersectionObserver 延迟加载
const observer = wx.createIntersectionObserver();
observer.relativeToViewport({ bottom: 100 }).observe('.lazy-section', (res) => {
  if (res.intersectionRatio > 0) {
    // 加载该区域的内容
    loadSectionContent();
    observer.disconnect();
  }
});

2.4 实战案例：一个电商小程序的启动优化

最后分享一个我实际做过的案例。某个电商小程序，冷启动耗时 3.8 秒，用户反馈「打开太慢」。我做了三件事：

1. 分包：把商品详情页、个人中心、订单页拆到分包里。主包从 1.8MB 降到 800KB。
2. 首屏数据缓存：首页的推荐商品列表缓存到 Storage，冷启动时直接读缓存，0.3 秒渲染完毕。
3. 预请求：在 app.onLaunch 里提前请求首页接口，等页面加载完成时，数据已经回来了。

优化后，冷启动耗时降到了 1.2 秒。虽然不算极致，但用户反馈明显好转。说白了，启动优化没有银弹，就是一点一点抠细节。

好，这一章就到这里。下一章我们聊聊「页面渲染优化」，看看怎么让页面滚动更丝滑、列表加载更快。