校友会小程序开发笔记二十八：小程序启动性能评测与优化（1）

校友会小程序启动是用户体验中极为重要的一环，启动耗时过长会造成校友会小程序用户流失

 

开发者代码注入（逻辑层）

校友会小程序启动时需要从代码包内读取小程序的配置和代码，并注入到 JS 引擎中。

在校友会主包代码注入过程中，会触发小程序的 App.onLaunch 和首次 App.onShow 生命周期。

在校友会开发者代码注入完成后，框架侧会根据校友会用户访问的页面进行一些页面数据初始化工作，触发首页的 Page.onLoad, Page.onShow 事件。

 

对启动耗时的影响

校友会开发者代码的注入耗时直接影响小程序的启动耗时。

在主流的 JS 引擎中，代码注入耗时包括编译和执行等环节，代码量、同步接口调用和一些复杂的计算，都会影响注入耗时。

由于校友会首页渲染需要使用逻辑层发送的数据，如果开发者代码注入耗时过长，也会延迟首页渲染开始的时间。

在部分平台校友会上，微信客户端会使用 V8 引擎的 Code Caching 技术对代码编译结果进行缓存，降低二次注入时的编译耗时

 

 开发者代码注入（渲染层）

校友会开发者的 wxss 和 wxml 会经过编译注入到渲染层，包含页面渲染需要的页面结构和样式信息。

渲染层的注入耗时主要和校友会页面结构复杂度和使用的自定义组件数量有关。

渲染层和逻辑层的校友会开发者代码注入是并行进行的。

对启动耗时的影响

由于校友会首页渲染需要使用渲染层的页面结构和样式信息，如果开发者代码注入耗时过长，会延迟校友会首页渲染开始的时间。

 

 

首页（初次）渲染

在校友会开发者代码注入完成后，结合逻辑层得到的数据和渲染层得到的页面结构和样式信息，校友会小程序框架会进行小程序首页的渲染，

展示小程序首屏，并触发首页的 Page.onReady 事件。Page.onReady 事件触发标志小程序启动过程完成。

 

对启动耗时的影响

校友会首页渲染耗时主要受页面结构和参与渲染的数据量影响

 

小程序首屏渲染完成

从开发者角度看，校友会小程序首屏渲染完成的标志是首页 Page.onReady 事件触发。

从框架的角度来说，校友会小程序的首屏的内容是基于小程序的初始数据，以及在渲染开始前到达的 setData 数据渲染的。

首屏渲染完成不表示小程序页面一定有完整内容，开发者触发的 setData（例如通过 wx.request 异步请求数据）不一定能参与到首屏渲染中。

由于框架和启动流程的差异，小程序定义的首屏渲染完成不等同于浏览器的 load 事件。

 

小程序启动阶段

从校友会用户点击访问小程序到小程序首屏渲染完成（首页 Page.onReady 事件触发）。

 

打开率/到达率

校友会小程序首屏渲染完成 PV 与 用户点击访问小程序 PV 的比值。流失率 = 1 - 打开率

 

小程序代码包优化

代码包优化的核心手段是降低代码包大小，校友会小程序代码包大小直接影响了下载耗时，影响用户启动校友会小程序时的体验。

开发者可以采取以下手段优化校友会小程序代码包大小

1 校友会小程序分包加载

2 校友会小程序代码重构和优化

3 控制代码包内图片等资源

4 及时清理没有使用到的校友会小程序代码和资源