前言

小程序性能优化有两个主要的切入点：一是针对小程序的启动流程进行性能优化，加快小程序的启动速度。二是针对运行中的小程序做性能优化，保障小程序的流畅响应。

本文针对小程序启动流程的四个阶段，给出对应的优化方向，具体的优化方法会在其他文章阐述，这里先说个大概，好让大伙有个概念。

对小程序开发者和小程序框架开发者可能会有一点帮助。

一、资源准备

包管理模块优化抓手

1. 拉取小程序信息（版本号、头像、配置、权限等信息），以便对小程序进行版本管理、权限控制和校验。

   这一步的优化抓手是：

   1 优化原生侧网络请求，加快请求速度（移动端网络优化）

   2控制发版速度。因为发版过于频繁会导致启动耗时增加（因为每一次发版都要重新获取小程序基础信息、进行增量更新、生成Code cache，生成初始渲染缓存）

2. 运行环境准备

   要准备的环境有：小程序进程（iOS 的小程序跟微信共用一个进程），WebView 容器，JS引擎和小程序基础库 jssdk

   小程序基础库这个时候就要准备了吗？怎么准备？

   这一步的优化抓手是：

   环境预加载：指的是在小程序启动前，就加载部分环境，如图:

1. 代码包下载、校验

   包管理模块的抓手

   这一步的优化抓手是：

   1. 缓存小程序包，搭建更新机制，让业务方可以灵活配置更新策略。
   2. 代码包压缩：Zstandard 算法（对小数据的压缩效果好）
   3. 增量更新：不下载完整的新版小程序包，只下载变动的部分，并更新原来的小程序包
   4. 采用高效网络协议：QUIC、HTTP/2
   5. 预先建立连接：下载开始前，先和 CDN 建立连接，避免 DNS 耗时
   6. 代码包复用：不下载 MD5 相同的小程序包
   7. 小程序包体积优化：分包；预下载分包；小程序资源放 CDN；清理无用代码和资源

二、代码注入

注入：指的是让 JS 引擎和 WebView 执行小程序包中的代码

1. 框架层代码注入（ jssdk 包）：注入过程中，会触发小程序的 App.onLaunch 和 App.onShow 生命周期函数。
2. 业务代码注入（ jsapp 包）：会把 WXSS 和 WXML 编译成 JS，注入视图层。这部分代码包含页面渲染需要的页面结构和样式信息

这一步的优化抓手是：

1. 【框架层代码注入】Code Caching：V8 引擎的，对代码编译结果进行缓存，减少非首次（第二次第三次等，因为第一次，总得编译一次）注入时的编译耗时。
2. 【业务代码注入】按需注入：也就是当前访问页面没用到的代码不注入。用时注入：不渲染的自定义组件不注入。

三、首屏（初次）渲染

1. 逻辑层代码注入完成后，小程序框架会初始化首页的页面组件树，生成初始数据发送到视图层（WebView），依次触发首页的 Page.onLoad ， Page.onShow 函数
2. 视图层代码注入结束，同时收到逻辑层发送的初始数据，小程序框架开始渲染首页，触发首页的 Page.onReady,

Page.onReady函数执行完毕，宣告小程序完成启动过程

这一步的优化抓手是：

1. 缓存「初次渲染」的结
2. 不引用不使用的自定义组件：usingComponents
3. 渐进式渲染：先展示页面的关键部分
4. 提前请求页面数据（提前拉取、定期拉取）
5. 缓存请求数据

四、内容展示

首屏渲染完成后，如果此时首页数据已经请求成功，那么用户会立刻看到首页内容。

如果请求还没回来，则需要等待网络请求异步返回，调用 setData更新页面，才能呈现页面。

这一步的优化抓手：

一般如果数据暂时还没回来，我们会先给用户展示一个「骨架屏」，提高用户体验。

参考资料

• 微信文档：小程序启动流程介绍
• 了解小程序的启动流程（上）