京购小程序页面加载权重和计算用户体验值评分

小程序性能是指小程序在微信APP或其他宿主APP中加载、渲染的速度，以及小程序对用户交互的响应能力。 性能不足的小程序渲染和响应速度慢，甚至可能无法正常打开小程序，不同程度地极大影响用户体验，导致用户流失。

随着越来越多的商家在京东购物小程序上不断更新迭代，其启动业绩逐渐下滑。 微信后台开通率仅为86%，每天损失数百万。 随着互联网人口红利结束、增速放缓，如何通过技术手段提升初创企业绩效，才能更好地留住来之不易的增量用户，进一步助推业务增长。

2. 绩效指标及衡量

用性能指标来评估小程序的加载速度是非常有必要的。 我们回顾一下京购小程序页面加载的几个关键阶段：

这些关键阶段的含义如下：

阶段

意义

小程序代码包下载

第一次油漆 (FP)

首先绘制的页面

第一次油漆 (FCP)

第一张有内容的图

第一次油漆 (FMP)

第一张有意义的图画

油漆(LCP)

绘制页面最大内容并达到交互状态

在上述阶段中，我们最关注的是从用户点击小程序到绘制出页面最大内容（LCP）所需的总时间。

筑龙监控平台为京购小程序开发者提供了性能监控指标。 我们可以使用筑龙监控平台来查看相应进程的时间消耗情况作为衡量标准。 小程序启动流程如下：

几个关键监控指标字段及其对应含义如下：

场地

意义

e

下载代码包需要多长时间？

逻辑层JS代码注入耗时

第一次渲染页面所花费的时间

页面切换时间

第一内容绘制时间 (FCP)

小程序启动时间

最大内容绘制时间 (LCP)

筑龙监控平台根据上述指标的权重以及各指标得分的加权平均值，计算出用户体验价值得分（UEI），如图：

3.如何优化性能 3.1 代码包大小优化（旨在减少小程序初始化耗时）

从上面的京购小程序启动流程图来看，在app执行之前，主要耗时的阶段是代码包下载和代码注入。 代码包下载和代码注入的持续时间与小程序逻辑代码的大小有关。 一般来说，小程序代码包越大，逻辑层代码也越大，初始化时间也会越长。 这里我们使用以下技术：

3.1.1 独立分包

“独立分包”可以独立于主包和其他分包运行。 从独立子包页面进入小程序时，无需下载主包。

开发者可以根据需要将某些具有一定功能独立性的页面配置成独立的子包。 小程序从普通分包页面启动时，需要先下载主包； 独立分包可以不依赖主包运行，可以大大提高分包页面的启动速度。

对于京购小程序首页，我们采用独立分包的方式开发了京购快车版首页，并逐步上线 入口。 与普通套餐相比，极速版首页启动时间整体缩短了420ms，优化了14.5%的启动时间。 以上的好处来自于侧面的整体优化效果。

3.1.2 异步分包

“异步分包”将小程序的分包从页面粒度细化到组件甚至文件粒度。 这使得一些只能放在主包内页面上的插件、组件和代码逻辑可以被剥离到子包中并在运行时异步加载，从而进一步减少包大小和启动所需的代码量。

子包异步化可以有效解决主包大小过度膨胀的问题。

对于附近生命圈频道页面，我们通过分包异步的方式将主包组件移至分包中，将附近生命圈占用的主包空间从126kb减少到39kb，大大减少了主包代码大小； ，通过首页、购物车、北京等模块的共同努力，通过分包和异步化，将大小从203kb缩小到31kb； 通过分包和异步化，类别选项卡从 138kb 减少到 6kb。 特别感谢包括“基础业务研发部”在内的兄弟部门对减肥工作的帮助和支持。

3.1.3 分包预下载

使用“分包加载”后，虽然可以明显提升小程序的启动速度，但当用户在使用小程序时跳转到分包内的页面时，需要等待分包下载在进入页面之前完成，导致页面切换延迟，影响小程序的使用体验。 分包预下载是为了解决第一次进入分包页面时的延迟问题而设计的。

值得注意的是，独立分包和分包预下载可以一起使用。 对于独立分包，也可以预先下载主包。

我们在附近生活圈频道页面引入分包和异步组件后，附近生活圈频道各楼层组件的渲染速度有所下降。 因此，我们在首页配置了预下载分包组件，提前下载附近的生活圈。 圈子分包组件解决了页面组件首次进入附近生命圈时延迟渲染的问题。

3.2 代码注入优化 3.2.1 按需注入

我们可以通过小程序配置选择性地注入必要的组件代码：

{
  "lazyCodeLoading": "requiredComponents"
}

当启用“按需注入”时，小程序仅注入当前访问页面所需的自定义组件和页面代码。 未访问的页面以及当前页面未声明的自定义组件不会被加载和初始化，相应的代码文件也不会被执行，以减少小程序的启动时间和运行时内存。

值得注意的是，插件包和扩展库目前不支持按需注入。 如果需要按需加载插件，可以考虑将插件放在分包中，通过“分包异步化”异步引入。

3.2.2 减少启动过程中的同步API调用

小程序启动过程中，会初始化代码以及App.、App.、Page.、Page.等生命周期函数。 等等将按顺序同步执行。 在此期间，应尽量减少或不调用同步API 调用。

我们在初始化阶段很容易调用的常见同步API包括：

/，可以尝试使用异步版本API代替； /，仅应用于数据的持久存储，而不应用于运行时数据传输或全局状态管理。 3.3 首屏渲染优化

页面首屏渲染的优化，旨在让用户更早看到内容丰富的页面渲染（FCP）或有意义的页面渲染（FMP）。

3.3.1 避免引用未使用的自定义组件

在页面渲染阶段，会首先读取当前页面配置和全局配置中引用的自定义组件，以及该组件所依赖的其他自定义组件。 引入未使用的自定义组件会影响页面的初始渲染时间。

因此，当部件不使用时，应及时将其拆除。

3.3.2 精简首屏数据

第一次渲染页面所花费的时间与页面的复杂程度正相关。 在京购小程序的很多业务场景中，小程序渲染的页面高度超过一屏。 然而，当用户第一次进入页面时，超出屏幕的页面内容没有实际意义，所以我们只需要优先渲染范围内的可见内容就足够了。 页面首屏渲染完毕后，剩余页面内容将继续异步渲染。

因此，我们可以对页面首次渲染的内容进行一定的权衡，即：

如果页面从上到下由多个独立的组件组成，那么我们可以延迟加载不在首屏范围内的组件； 如果页面是由展开的列表项组成的，比如首页的 feed 流，那么我们可以主动控制列表项的长度进行分页加载，然后在滑动接近底部时加载并渲染更多的列表项。

需要注意的是，数据中尽量不要放置与页面渲染无关的数据，以免影响页面渲染时间。

3.3.3 提前首屏数据请求

由于网络请求需要一定的时间，所以我们的小程序页面渲染的数据往往需要通过服务端接口返回。 在服务器端接口返回数据之前，我们的页面可能是空白的或者是骨架屏。

为了尽早发出核心数据请求，我们可以利用微信小程序提供的能力：数据预取。

“数据预拉”是指我们在小程序启动时，让微信客户端通过微信后台提前从我们的服务器拉取核心业务数据。 当代码包加载完成后，我们可以通过晶沟首页的wx.ta获取预加载的数据。 拉取的数据可以更快地渲染我们的主页并减少用户等待时间。 具体核心流程如图：

3.3.4 缓存初始渲染的请求数据

除了上述的数据预拉取能力外，微信小程序还提供了wx.、wx. 以及其他读取和写入本地缓存的 API。

在京购首页上，我们将上次读取的传出界面数据存储在缓存中，这样当用户下次初始化主页时，会先从缓存中读取主页直接传出数据，快速渲染页面的整体视图。 界面真正返回后，页面才会更新。

3.3.5 骨架屏

“骨架屏”用于页面渲染之前，通过一些灰色块大致勾勒出页面的轮廓。 页面数据加载后，将被替换为真实内容。 骨架屏可以有效防止请求过程中页面显示白屏，防止用户误认为加载失败退出小程序； 还可以防止不同楼层异步渲染时页面上下跳转，影响用户体验。

3.4 版本更新频率及其他优化 3.4.1 合理规划版本发布

从小程序更新机制可以知道，如果小程序在启动时检测到版本更新，就会重新获取小程序的基本信息，重新生成初始渲染缓存等操作，从而影响页面启动时间。 过于频繁的发布和更新频率可能会导致用户每次重新打开小程序时都需要更新小程序，使得平均启动时间变长。

因此，我们应该提前规划版本，控制版本发布和更新的频率。

3.4.2 优先本地版本设置

通过“首选本地版本设置”，确定部分较新的小程序版本不需要强制用户更新到最新版本。 您可以在小程序管理后台通过“设置”-“功能设置”-“优先选择本地版本设置”进行设置。 设置后，用户使用小程序时，客户端将优先打开本地版本代码包。 如果用户本地版本不低于该版本，则优先使用本地版本，后台异步更新最新版本的代码包。 如果低于该版本，会优先更新到最新版本。

4. 总结与展望 4.1 性能优化总结

看到这里，在了解了京购小程序的性能指标和启动流程后，我们已经可以很方便地从筑龙监控平台查看到我们负责的业务对应的页面性能数据，并在一个页面中发现我们页面的一些性能数据。及时解决问题并及时优化。

当然，除了上面解释的前端性能优化策略之外，我们还可以探索诸如与服务器约定新的数据格式等想法，以避免服务器传输无效数据导致响应内容过大。

经过我们上述的各种优化，从我们分析的微信官方后台的数据可以看出，京东购物小程序的打开率从原来的86%提升到了90%以上，每人减少了近百万用户。比优化前一天。 流走。

下图是京东购物小程序内测阶段优化前后的实机体验对比。 从筑龙监测平台来看，首页整体冷启动时间从左到右下降。 目前，在线灰度过程中，有50%的用户随机命中优化版本。 后续将根据业务数据评估，逐步提高灰度比例，全面提升用户体验。

4.2 未来展望

基于我们目前在性能优化方面的探索和实践，结合线上实际的统计数据分析，未来我们仍然会对“页面优先渲染”等占用大量时间的流程进行深入的实践。 在“渲染”上做出更多“性能优化”的尝试，从精简业务数据到尝试新的渲染引擎等，为客户提供更加友好、流畅的用户体验。

TAG标签：小程序api