共计 5089 个字符，预计需要花费 13 分钟才能阅读完成。
本期技术加油站给大家带来百度一线的同学对小程序启动性能优化的小技巧：本文从性能优化的价值、性能指标的定义域掂量以及如何优化性能这几局部内容来帮忙大家疾速对小程序性能优化相干的办法有肯定的了解。
一、小程序简述
小程序作为新型的 APP 利用解决方案，因为它快捷的开发效率，高效的公布能力，以及丰盛的与端协同能力，被越来越多的被互联网各个厂商所认同，不谋而合的转战到这个赛场上。性能是推动业务飞轮的技术突破点，未免也会引发大家对小程序的性能这一块的疑虑？小程序的性能如何掂量，有没有比较完善的针对性能优化的思路与工具？针对下面的问题，咱们从性能优化的价值、性能指标的定义域掂量以及如何优化性能这几局部内容来帮忙大家疾速对小程序性能优化相干的办法有肯定的了解。
二、为什么要进行性能优化
小程序性能是指小程序在百度 APP 或其它宿主 APP 中加载和出现的速度，以及小程序对用户交互的响应水平。性能欠佳的小程序显示速度和对输出响应的速度较慢，甚至会呈现内容不可拜访的状况，这将在不同水平上影响用户体验，从而导致用户散失。
晋升应用时长
开发者心愿用户可能通过小程序进行有意义的行为。例如电商类小程序心愿用户购买商品；内容类小程序心愿用户浏览、订阅；政务类小程序则心愿更加简略便捷的为用户提供服务。
多项案例钻研表明好的性能，能够更好的留住用户：
- Pinterest 将用户等待时间缩小 40% 后，搜索引擎流量和注册人数随即增长 15%；
- COOK 将均匀加载工夫缩小 850ms 后，转化率晋升 7%、跳出率降落 7%，同时每次会话浏览页数减少 10%。
而性能欠佳则将散失更多用户：
- BBC 钻研发现网站加载工夫每减少 1s 将多失去 10% 的用户；
- DoubleClick by Google 则示意，如果页面加载工夫超过 3 秒，53% 的挪动网站拜访流动将受到摈弃。
进步转化率
转化率是指用户进行了某些指标行为的拜访次数与总拜访次数的比率，这些行为包含订阅、购买等。
留住用户对于晋升转化率至关重要，已有钻研表明缩短渲染工夫可进步转化率：Tokopedia 将 3G 连贯的出现工夫从 14s 缩小到 2s 后，访问者减少了 19%，会话总数减少了 35%，新用户减少了 7%，沉闷用户减少了 17%。同理，缩短小程序渲染工夫，将无效进步转换率。
晋升用户体验
性能是发明良好用户体验的基本要素。当用户进入小程序时，良好的性能能够疾速加载页面。如果性能欠佳，加载速度过慢，用户则不得不期待，当用户忍耐低性能的小程序到肯定水平后，则会抉择放弃。《High performance iOS Apps》一书中的数据显示，25% 的用户在利用启动工夫超过 3s 时会放弃应用。
三、性能指标与掂量
应用性能指标来评估小程序的加载速度是十分必要的。首先回顾一下小程序页面加载的几个要害阶段。
这几个阶段的含意别离如下：
| 阶段 | 含意 |
| Loading | 下载小程序包阶段 |
| First Paint（FP） | > 界面的首次绘制 |
| First Contentful Paint（FCP） | 首次有内容的绘制 |
| First Meaningful Paint（FMP） | 首次有意义的绘制 |
| Time to Interactive（TTI） | 页面绘制实现，达到可交互状 |
咱们最为关怀的是，从用户点击小程序到第一个页面首次有意义绘制（FMP）的总耗时。
百度智能小程序为开发者提供了性能监控指标平台，帮忙开发者监控小程序的线上加载性能。开发者能够在“开发者平台 - 开发治理 - 运维核心”的界面，看到小程序的加载性能监控。
在运维核心中，用户能够监控小程序的性能指标（在运维核心中，FMP 称为上屏时长），如下图所示：
四、如何进行性能优化
==============
4.1 小程序启动流程
—————
无效地辨认小程序性能问题并制订优化策略的重要前提是可能理解、相熟小程序启动流程。
因而，咱们首先大抵介绍下百度智能小程序的启动流程，如下图所示：
接下来简要介绍下各个环节小程序框架次要做的内容：
1、用户点击关上小程序
小程序启动的终点。
2、下载小程序包
用户首次关上小程序时会下载最新版本的小程序包。
3、启动小程序运行框架
初始化小程序逻辑层
* 加载逻辑代码：逻辑代码指的是 App、页面、自定义组件和用到的其余 js 模块的汇合。
* 执行 APP 生命周期函数：必要的 js 资源加载实现后，小程序框架会执行 App.onLaunch、App.onShow 生命周期函数。
初始化小程序渲染层
* 加载以后页面显示所须要的多种资源，包含：app.css、页面和所有自定义组件的模板（.swan）与 css 相干文件等。
* 自定义组件资源加载实现后，小程序框架会初始化自定义组件，将其解决为渲染所须要的组件。
4、initData 与首次渲染
逻辑层初始化实现后，小程序框架会收集页面显示所须要的数据（initData），而后将此数据发送给渲染层（sendInitData）。
渲染层收到 initData 后，会初始化页面，绑定模板与数据，并开始首次渲染（FCP）。
5、执行页面生命周期
渲染层实现页面首次渲染后，会告诉逻辑层（firstPageRender）开始执行页面生命周期。
开发者通常会在 onLoad-onReady 生命周期中，开始申请页面主数据（小程序心愿首屏展现给用户的数据）。
6、首次有意义的渲染
数据申请实现后，开发者通常会将数据发送给渲染层（setData），而后渲染层绘制实现后触发 FMP。
> 后文中，咱们会把页面主数据的申请和之后对应的 setData 称为外围申请（request）和外围 setData。
—
4.2 如何辨认性能问题？
—————–
性能问题可能会产生在启动流程中的不同阶段。
不同的小程序，面向的应用场景不同，业务逻辑不同，展示给用户的页面构造也不同，因而性能问题的体现会有微小的差别。
即便对于同一小程序，不同阶段存在的问题对最终性能的影响水平也不同。咱们往往须要关注性能瓶颈，而漠视绝对不重要的局部。
此外，小程序启动流程中的各个阶段并不是独立的，会存在一些分割。当实现一部分性能优化后，性能问题的体现可能会和之前存在较大的差异，须要从新剖析思考。
因而小程序性能问题的剖析与辨认是一个绝对简单的过程。过来，剖析小程序性能问题，通常依据过往的性能优化教训或者通过浏览小程序代码等形式来做到。但这一过程不仅耗时耗力，且最终后果不肯定精确。
工欲善其事，必先利其器。应用好的工具，会极大地提高咱们剖析、解决问题的效率。
百度智能小程序提供了启动性能剖析工具（https://t.hk.uy/bbsQ），能够将启动流程形象化地展现进去，以帮忙开发者疾速定位性能问题与影响。
> 后文中，有时会将启动性能剖析工具简称为性能工具。
上图为启动性能剖析工具的展现页面，次要由三个局部组成：顶部栏、左侧栏与主面板。
顶部栏地方是两个选择器，别离用于抉择历史性能数据和对应的不同页面的性能数据。左侧栏用于切换不同的主面板，以显示不同类型的性能数据分析后果。
在 FMP 面板中，启动性能剖析工具将启动流程转化为了时序图：
1、左侧为逻辑层，右侧为渲染层
2、从上到下，工夫逐步减少
3、线的长度，示意了这一阶段在整体启动流程中的耗时比例（相对值）
> 时序图的右侧，通过表列出各个阶段具体的开始、完结与耗时状况（绝对值）
4、绿线示意以后线程繁忙，灰线示意闲暇，左右侧连接线示意通信（事件、数据传输），蓝线示意申请。
能够通过时序图，疾速断定哪个阶段，相对而言是最耗时的。
—
4.3 如何解决性能问题？
—————–
不同的性能问题，对应着不同的解决办法。
依据教训，小程序的性能问题，通常呈现在初始化小程序逻辑层、申请主数据（onLoad 执行）、首次有意义的渲染这几个阶段中。下文将形容这些性能问题的具体表现与相应的优化策略。
### 小程序包优化：缩小小程序初始化耗时
在时序图中，通常体现为在 App.onLaunch 前耗时过长，如下图所示：
在 app.onLaunch 前，次要阶段为加载和执行逻辑代码。
加载逻辑代码的时长，次要和小程序逻辑代码体积相干。
一般而言，小程序包越大，逻辑层代码体积也越大，因而加载会越耗时。
开发者能够应用分包、独立分包（https://t.hk.uy/bbsS）或剔除无用代码等模式，升高小程序包的代码体积。
执行逻辑代码的时长，次要和小程序逻辑代码业务相干。
除了优化 js 代码自身执行的耗时外，开发者也须要关注 swan API 的调用状况。
很多 swan API 因为波及到与客户端 APP 的通信，因而比 js 代码执行更加耗时。而小程序可能会反复调用很多 API，但这些 API 的调用后果是不变的，例如 getSystemInfoSync 等。因而倡议依据业务状况，将后果进行缓存，会无效缩小执行逻辑代码的时长。
### 申请提前：尽可能早收回外围申请
很多开发者会在 onLoad 中收回外围申请。但如启动流程所示，onLoad 执行依赖于首次渲染实现，如果首次渲染较慢，则会导致 onLoad 执行过晚。
百度智能小程序提供一种页面级别的生命周期 Page.onInit。此生命周期会在页面首次渲染前触发，相较于 onLoad，生命周期执行工夫会有极大的晋升。
下图为将申请提前至 onInit 的时序图成果：
能够看出，申请响应与首次页面渲染是并行处理的。因而会有非常明显的优化成果。
百度晓得、百度百科、宝宝晓得小程序进行此优化后，别离带来了 210ms、100ms、150ms 的性能晋升。
开发者要接入 onInit，可参考：Page.onInit 接入指南（https://t.hk.uy/bbsT）。
###
### 申请响应优化：缩小外围申请耗时
在时序图中，体现为外围 request 蓝线过长：
除了优化网络服务器自身的性能外，优化申请响应也能够从如下几方面思考：
开启 prelink
用于提前和业务服务器建设网络连接，使随后的主申请能够复用该连贯，晋升申请速度。
上图为应用 prelink 前后的比照：在配置了 prelink 时，小程序框架会在加载逻辑代码的同时发送一个预连贯申请。在发送主申请时，能够间接复用该连贯，达到缩小主申请时长的目标。
prelink 配置指南（https://t.hk.uy/bbsW）
开启服务端 gzip
gzip 是节俭带宽和放慢数据速度传输的无效办法。当服务端开启 gzip 后，能够减小申请传输的体积，使得传输速度更快。
缩小申请响应的体积
某些状况下，申请响应中蕴含了较多与页面显示无关的数据，导致了传输体积过大，响应耗时太长；例如响应体积有 200K，其中只有 50K 与页面显示无关。
蕴含过多无用数据的起因可能是因为一个数据接口服务于多种需要，而每种需要须要的数据不尽相同，因而导致了体积过大。
能够思考与服务端约定新的数据格式与接口，以减小申请响应体积。
###
### 渲染优化：防止首次渲染较多内容
如下时序图所示，申请实现后，外围 setData 的渲染成为了最耗时的阶段。
通常而言，这意味着开发者渲染了过多的内容。
在很多业务场景中，小程序渲染的页面的高度是超过一屏的。但在首次进入页面时，只需渲染出可视范畴的内容即可。当页面首次渲染结束后，再持续异步渲染剩下的页面内容。因而能够对首次渲染的内容做肯定取舍或删减，例如：
* 如果页面从上到下，由多个不同的独立局部组成，那么不在首屏内的局部，能够稍后渲染。
* 如果页面是由一组构造雷同的多个列表项形成，那么首次渲染时，被动管制列表项的长度，不在首屏中的列表项，稍后渲染。
案例参考：宝宝晓得问答页按需渲染优化（https://t.hk.uy/bbsY）
五、总结与瞻望
===========
开发者在理解小程序的性能指标和启动流程之后，能够比拟容易地通过启动性能剖析工具，发现性能问题并进行优化。除了上述提到的性能问题与优化策略外，开发者也能够进一步浏览百度智能小程序官网提供的性能优化文档，获取更多、更具体的优化办法与实际案例。
除了依据时序图开发者自行剖析外，目前性能工具同时提供了性能剖析清单，能够主动剖析出小程序的性能问题并给出优化倡议。查看项与倡议，基于小程序以后运行的后果与线上的统计数据，交融了小程序性能优化的实践经验，因而通常会更加直观无效。
在将来，咱们会尽可能提前将可能存在的性能问题提醒给开发者：将自动化的性能剖析与小程序公布流程有机地联合在一起，将性能问题拦挡在全量公布前，防止到了上线后才发现改变会引起非预期的性能进化。
———- END ———-
举荐浏览【技术加油站】系列：
百度工程师教你玩转设计模式（单例模式）
代码语言的魅力
百度程序员 Android 开发小技巧
