做者 | 飞猪手艺团队
审校 | 蔡芳芳
布景
启动优化在客户端永久是一个绕不开的话题，几乎所有 APP 都继续在此投进精神，逃求极致的秒出、曲出。比来几年也不断有讨论几大头部 APP 启动快慢问题的声音呈现，拼多多、付出宝都是业界公认在启动方面做的特殊凸起的。由此可见，APP 的翻开速度，体感顺畅性，用户心里已经默默记在了小本本上，以至可能在潜意识里影响了他的翻开行为。
关于飞猪来说，首页是用户可见的飞猪首个页面，是全行业的流量进口，飞猪的门面，它给用户理解“飞猪是什么样子的”奠基了基调。营业设想和产物为了打造飞猪特殊的心智、赐与用户立异性的交互体验以及增加进口的吸引力，飞猪利用了大量的动图和视频才能，良多别致的交互体例和设想在业界也具有首创性。
可变高 banner 行程卡抽屉 顶部动画
但是跟着交互复杂度的不竭增加，首页的衬着途径越来越长，页面构造层级越来越深，在交互复杂度上已经逐步赶超手淘。那也招致首页体验的根底-性能，起头逐步遭到影响，如白屏、卡顿、明灭、加载慢等。以上问题已经逐步影响到了用户的利用体感，因而针对首页性能问题的集中梳理与优化，已经迫在眉睫。
双十一之前，我们针对以上问题停止了一波集中优化，包罗启动速度和启动体感，最末根本到达了冷启动和初次安拆全数曲出的效果：
冷启动：
初次安拆：
启动度量体例演进启动时长
业界最通用的度量体例，从启动起头，并设置某一时间点做为启动完毕，通过埋点上报的体例统计 APP 的启动时长。它的益处是可以从宏看上来统计 APP 在所有用户上的启动时长，从而停止启动阐发。问题在于完毕时间点的设定，什么时间点可以认定为首页启动完毕呢？是首页起头加载，仍是首页上的元素全数加载完成，仍是首页可交互？那没有一个原则的谜底。并且那些数据能否可以完美代表用户的启动体感，那里要打一个大大的问号，好比启动过程中首页有一段时间的白屏，有几张图片没有加载出来，那些是很难通过启动时长来完全表达的。
分帧录屏
分帧录屏示例：
通过火帧录屏，可以比力清晰的阐发 APP 启动过程中每一帧的形态，哪些帧是白屏的，哪些帧是空窗的，其他 APP 在启动过程顶用了哪些“黑科技”，通过那种体例都能猜出个可能。而且，那种体例是最接近用户体感的，假设从体感角度动身，能搀扶帮助我们发现大量之前没有发现的问题。在那种度量原则下，完美的启动就是以 16ms 为一帧，每一帧都完全有内容，无白屏无空窗。问题是那种体例很难从宏看角度阐发问题，单个 case 颠簸较大。
启动时长+分帧录屏
更好的启动体例是宏看的启动时长+微看的分帧录屏，二者连系起来，即能以用户为视角动身停止优化，也能从宏看上包管整体的启动性能。
优化计划
本次优化将启动体感分为两个阶段，一是启动流程的优化，二是启动后首页交互优化。
启动流程优化
根据此次的目标，要从效果上做到录屏逐帧肉眼曲出，所以除了存眷统计目标外，初次把录屏效果纳进进来，因而更要存眷加载中的细节体感，数据为辅，以人的体感要求为目标。
1. 启动速度优化-启动项编排
通过同一的启动调度器来治理启动使命，合理分配 CPU 资本，并根据使命类别停止合理的调度编排，以此来优化启动速度。
如下图所示：启动编排最核心的是要梳理启动项的优先级以及依靠关系，找到称心起码需要依靠前提下的最长途径，然后对该途径上的节点逐个停止优化，其余的启动项根据优先级安放在启动过程中并行施行。
红色是核心使命组，黄色是阻塞使命组，绿色是预施行使命组
最末，我们梳理出了进首页前必需的阻塞使命共 26 个，他们施行过程中因为存在不成拆分的长耗时使命，以及依靠关系，会呈现一些期待，因而预施行使命组中也有一部门使命会交叉进往填补那些空隙。
进而我们能够得到目前飞猪启动阶段中的一条最长使命途径。能够看到，后续假设我们还能有对阻塞恳求有战略或性能上的优化的话，那么启动速度就还能再加快一些。
最末 90%设备启动耗时提拔超越 1 秒。
以上瀑布流均为进进首页前的启动项流程，关于进进首页后和首页并行的启动项，由京杭两地根底线与营业线的同窗协做优化，连系营业场景，合理编排使命，将首页前 3s 的帧率由 30-40 帧优化到 50 帧以上。
2.缓存图片加载优化
当地存在图片缓存的优化场景：
1. 图片 load 加速：启动阶段，即便图片在磁盘中，图片的觅址也十分慢。通过提早解析缓存数据，成立图片索引，能削减几十到上百毫秒的耗时。
2. view 预创建：通过提早创建主体容器，将图片加载的时机提早。
3. 图片加载优化： 我们利用的 phenix 图片库，颠末手淘封拆后，又被飞猪封拆了一层，内部增加了许多逻辑揣度，因而利用效率上要比原生的 phenix 要慢，我们跳过了封拆库的利用，间接挪用 phenix 加载图片，能削减几十毫秒的耗时
4. 嵌套容器衬着滞后：通过必然战略截取上一次的图片，绕过容器加载间接笼盖到指定位置，可实现模块的曲出效果，并可以模仿点击。
PS：以上问题在其他页面影响能够漠视不计，但在首页启动阶段，资本食紧，小问题变大问题。
3.图片切换优化
图片切换过程中，一般流程会将原图肃清，待新图下载好后再衬着，招致存在必然时间的空窗期，形成闪白。
纯图场景：纯图场景不纯在图文不符的问题，可延后原图的肃清时间，做为 placeholder 笼盖，待新图下载好后可做到光滑切换。图文场景：图文同时存在，因为文字的衬着速度较快，必需将前图肃清，不然会呈现图文不符的问题，那种情状利用打底图笼盖，制止纯白布景。4.完全无图片缓存
常见场景：大促胶囊，榜单及其他动态模块。
动态组件增加的场景，因为其不确定性，无法提早内置图片，无法粉饰，只能寄期看于收集速度。
首页与二级页资本分配：那种场景下收集资本反常重要，但同时也有二级页在做资本已经图片的预加载，因而需要合理根据优先级分配加载时机和带宽，平衡首页与二级页的优化效果。
渐进式图片加载：为了更快的内容填充，我们借鉴了微信大图阅读的图片加载体例。图片两段式加载，优先加载缩略图，原图下载胜利后再替代。
首页独立缓存区：目前 APP 内所有的图片资本缓存都由图片库同一治理，在二级页阅读图片较多后，首页的图片缓存会被清理，考虑到首页图片的优先级较高，可开垦一块独立的首页缓存，不与 APP 中其他图片共享资本，包管缓存不被清理。
5.初次安拆体验优化
初次安拆处于一个完全无缓存的情状，各个 APP 在那种情状下表示都不太好，会呈现大面积的空窗。
iOS：iOS 端飞猪在权限申请阶段，会有一个 idfa 浮层在上方粉饰，用户点击完成后首页已根本完成衬着过程，所以飞猪 iOS 端在初次安拆场景下是天然曲出的。Android：Android 不存在 idfa 浮层，我们借鉴了 iOS 的场景，将闪屏的时间做了耽误，躲避掉了初次安拆大面积白屏的问题。付出宝初次安拆必需登录，所以不存在此问题。启动后优化
连系优化前搜集到的槽点，我们把优化重点放在了信息流图片加载速度，进进首页前几秒的卡顿问题和首页资本管控上。
1.收集图片加载速度优化
收集图片加载速度受收集速度影响，首页信息流快速滑动过程中，会有大量的承接页预加载恳求和视频的缓存加载恳求等等，极大的影响了收集加载速度。
通过视频预加载优化与曲出预加载优化减轻了信息流快速滑动过程中的收集压力，将收集图片的加载速度不变在了 300ms 摆布。
信息流视频缓存掌握流程如下：
优化后效果如下：
横轴是信息流图片加载数量，纵轴是图片加载耗时，橙线是优化后的效果
2.首页启动项编排优化目前有较多的启动项使命在首页刚呈现时起头施行，招致 APP 启动后首页在几秒内处于十分卡顿的形态。核心构想是将那部门启动项从头梳理，根据优先级放到适宜的时机往施行同时又不合错误原有逻辑形成影响，制止大量启动项堆积形成的卡顿。
优化后将首页启动后 3s 内的帧率从 10-30 帧不变到了 50 帧以上
3.资本位管控
之前首页 pop 没有针对运营设置装备摆设高帧 gif 浮层做强管控，很可能上线不契合原则的资本招致首页卡顿，需要成立愈加完美的管控机造。目前 CRM 加强了对图片资本的管控，能够针对差别图片类型限造图片大小，图片尺寸与格局限造，同时能够检测 gif 动图的帧率并对其停止限造。
4.首页 CPU 占用优化
目前首页有多处利用 lottie 的场景，lottie 在一般播放过程中会占用必然的 CPU 资本，如首页顶部的刷新头，动画播放过程中会占用 30%摆布的 CPU，哪怕是一个很小的 lottie 动画。且首页是常驻在 APP 的生命周期内的，会将那一影响带到其他页面。
此次将首页的 lottie 场景全数同一收口革新，隐躲、分开页面、不在可视范畴内等所有情状将所有 lottie 一律暂停播放。
优化效果Android 端启动时间优化
Android 端在优化完成后，90% 设备启动耗时加快了 1116ms，缩短超越 1s。
从上到下别离为飞猪、手淘、优酷、闲鱼、付出宝：
优化前后比照-冷启动
以下比照均来自 3、4 年前的设备，目前属于中低端机型。
所有比照均已包罗启动速度优化，无需比照启动速度。
右侧视频为优化后效果-iOS
设备：iPhone 11 Pro Max
未优化之前的焦点图空窗时间较长，其他组件包罗金刚，特卖和榜单也能明显的看到从白到加载的过程。优化后在用户能看到的第一帧起头，所有组件已经全数加载完成了。
右侧为优化后的效果-Android
设备：小米 CC
Android 端之前的启动体验较差，会有大面积的白屏情状，如今能够做到首页的曲出
优化前后比照-初次安拆右侧为优化后的效果-Android
设备：vivo nex-3s
针对初次安拆的情状，我们同样做了处置，因为初次安拆当地毫无缓存，所以不成制止的会呈现较长时间的大面积白屏，预期让用户停留在白屏阶段，不如让用户“等一下”，可以间接看到完全的首页。
APP 横向比照-冷启动从左到右别离是飞猪、手淘、闲鱼、优酷、付出宝
下面图片为便利比照，做了慢放处置
设备：iPhone 11 Pro Max - iOS
设备：vivo nex-3s - Android
猪客和其他 APP 的分帧比照
我们测试团队开发的视频分帧比照才能在本次优化中起到了重要感化，通过火帧比照，我们可以从细节平分析其他 APP 的优化计划，以及我们本身存在的问题，并逐渐对齐并超越。目前该才能已根本完成了产物化，可以做到每日全主动录造多个 APP 的启动形态并给出分帧陈述。在双十一期间首页变阵频繁，资本位、气氛改变大的情状下包管了首页可以及时发现问题并予以修复。
分帧效果：
后续方案
性能治理和包大小治理一样，打山河随便守山河难，造定一套标准（交互标准，资本标准，开发标准）以及日常的监控办法，才气够让首页启动体验不变连结，那才是此次首页体验优化的重中之重。
1. 体感原则度量与制定
单纯的启动时长无法完全表达体感，连系视频分帧，可以更合理的模仿人的体感视觉。若能做到 16ms 的视频分帧，那么根据每次启动笔录到的分帧数据，能够设立原则区分出一般帧与反常帧。反常帧能够是白屏帧，图片未加载出的空窗帧等等，完美的启动体验每一帧都是无白屏无空窗的。通过计算反常帧在总帧数中的百分比，能够设定一个别感原则。当然启动时长做为辅助目标，也应该在参考范畴内。
2. 监控与庇护
通过设定体感原则，天天或每段时间停止一次主动化体感检测，若不契合原则，则停止体感报警，催促开发停止优化。目前可以做到天天主动化给出分帧陈述，但是其实不具备主动化识别才能，那也是我们下一阶段要做的工作。
标准的造定同样重要，什么品种，优先级的组件要利用何种优化体例，复用体例，能否内置等等；所有的资本位图片大小的原则，gif 的原则，lottie 的原则，poplayer 的原则等等，需要严厉造定与施行；在营业先赢的根底上，交互的复杂度更高水位在哪，不克不及无限造的逃求交互的别致感而漠视最根底的体感。