明灏 大淘宝技能 2024年07月15日 18:04 浙江
近来做了一些移动端页面的首帧优化的工作，有许多心得和感受，此中有许多共性的东西，总结成一篇文章渴望可以资助到更多业务，也渴望引起读者一起讨论。
为何要做首帧优化
作为步伐匠人，不停在积极寻求做一款好的产物，打磨各个细节，做好用户体验，而首帧是用户打仗到产物的第一个页面，是体验的重中之重。也正因是产物的第一个页面，转化率靠近100%，从ROI的角度来说，做好首帧优化也是一个很划算的deal。
做好首帧优化，至少可以带来以下利益：
首帧口径和权衡标准
做优化前我们须要先想想，用户对首帧体验预期是怎样的？首帧界说是什么，起始范围是什么。差别的口径会影响我们的指标，操持方案，工作量。界说了口径之后，我们可以确定优化事项范围以及界限。
Loading图：
即开始出现loading、显现灰底图或是页面框架图，如果这页面展示也比力久的话，则分析用户交互出现卡顿、假死，迟迟充公到反馈，用户交互被壅闭，属于严峻影响用户体验的运动。以是发起在展示骨架图之前，除了framework以外，不要有io、网络等耗时的前置依赖，也不须要有中转页的运动逻辑。
内容主体出现：
即页面大部分的内容已经渲染出来，用户可以得到充足的信息，这是一个比力符适用户体感的口径，大多数业务选取的就是这个口径。不外差别业务对于“大部分”，“主体”的界说有所差别，业务可以联合自身需求举行公道选择：
页面可交互：
这个阶段表现页面已经完全渲染完成，而且用户可以进一步交互，如点赞、分享、收藏、加购等运动。
绝对耗时：
指定口径下的绝对耗时时长，单位一样平常是ms，多是用于单机线下的验证和比力，差别机型之间、差别场景下的差异较大，如高端机与低端机之间的差异可以相差好几倍，如要反应样本的团体性，多用分位值大概秒开率来权衡。
分位值/秒开率：
取值标准：
怎样分析排查性能题目（以Android为例）
起首要把握自身产物以及行业竞品的首帧数据，相识在行业中的一个排名情况，再决定是否要进一步做优化，做到什么样的水平。为了包管自身和竞品采取的同一种口径获取首帧耗时，我们这边采取了录屏的方式。
录屏分析方案：在同一台手机上使用特定帧率录屏（如30fps，即1帧33ms），再通过数帧数的方式来盘算出首帧耗时的时间，录屏的越高越正确。
自动化脚本方案：
通过自动化录屏脚本工具、使用模拟点击 + OCR笔墨辨认/图像辨认的方案，辨认首/尾帧、进而自动化天生耗时的中位数、匀称值。
在分析题目之前，我们要搞清晰体系是怎样将首帧绘制在屏幕上的，相识了这些我们才气针对性的分析题目。
从代码、资源等细粒度的维度（如方法级别、变乱级别），来定量分析步伐对CPU、内存、网络IO等焦点盘算资源的斲丧情况，可以比力完备、全面的分析启动过程，但这种方式得到的数据比力细碎、散点，须要颠末肯定的归纳、归并才气得到一个具体可实行的方案。
如果我们的页面是通过第二/三方的页面框架所构建，如weex/rn/flutter等框架。我们可以通过第二方框架提供的性能分析工具、插件去分析和归因。
偶尔为了增补官方工具火焰图太细碎、难以聚类、须要泯灭更多时间去分析和追踪，我们可以根据业务视角、使用自界说的业务阶段/流程，去粗粒度的去分析各个阶段的耗时。
常见的优化方案和战略
分析完缘故起因后，我们须要对差别缘故起因给出优化方案，首帧优化的焦颔首脑用一句话总结是：在尽大概在短的时间里预备好首帧渲染所须要最小的资源模子。围绕“最短时间”和“最小的模子”两个中心头脑下，总结了一些常见的优化战略：
在前置页面的公道机会（一样平常是闲时）提前获取数据、下载资源，并剖析，然后缓存到内存大概磁盘里，以便后置页面快速读取数据和资源。
这个战略大概带来以下副作用：
与首帧无关的代码逻辑、资源可以在首帧渲染后举行初始化，具体的初始化机会可以在使用时再初始化，如某些二级页面的创建、多余tab的创建等。
并行处理处罚：充实使用多核CPU，通过多线程并行处理处罚耗时的使命，提拔CPU的负荷。如容器初始化和数据哀求剖析可以同时举行。
异步化：一些比力耗时、IO使命，不要占用宝贵的主线程资源。
Android内里ViewTree构建和渲染是比力耗时过程的，如下：
优化方案：
为了加速数据获取，我们可以从前一个页面借用一部分数据过来将主体内容做添补，随后再用真实数据革新。这个方案多实用于列表进入详情的场景。
这里的数据不但包罗笔墨和图片，也可以延伸到媒体播放器、camera取景器等其他一些文件流、数据流，以致可以是widget组件（共享元素动画）。
如果页面元素比力多，数据量比力大，一次性哀求加载的时间比力长，这个时间我们可以通太过块的方式，将大页面拆成多少个小页面模块、将服务端接口拆成多少个小接口，各个页面模块独立渲染。可以有效低落服务端RT耗时，以及页面渲染耗时。
使用骨架图作为打底图和纯白底图相比，有告终构样式等信息，更加靠近于首帧的结果，正式数据革新时，页面也不会出现显着革新，体验比力好。
线上验收
线下的优化，并不意味着线上真实用户也能同步看到优化的结果，由于业务路径的差异、机型的差异，你线下的优化大概不具备广泛性，以是须要线上真实结果的反馈。
包罗：版本、装备分、业务场景、机型、时间等尽大概多的数据维度的数据大盘，可以只管还原优化or劣化的信息全貌，提供更多的归因信息。
长尾数据、小众case每每容易被团体数据给覆盖，不敷以引起器重，为了我们应该分别分析中位数、分位数。
如许做不但能控制变量确保优化项的严酷有效，还能借此来观察性能优化所带来的业务指标收益，这些都可以作为规划后续启动优化方向的参考引导。
防劣化
人无完人，人都会失误犯错，绝对不能把体系性能交给某一个人身上，一个人犯错概率高，一群人都犯错的概率低，应该交给一群人共同协作的机制和流程。
防劣化相比于优化是更能长期有益的，以是更应该在较早期创建起防劣化机制：
结语
首帧优化并非一挥而就，而是一个须要一连迭代与打磨的过程，在初期阶段优化空间相对较大，只须要投入一些不多的资源，即可看到较大的收益，但随着优化不绝深入，到了中期阶段，就须要有相称水平的投入，去攻坚各个难点，聚少成多，才气看到收益。后期随着业务越来越复杂，分支越来越多，要做防劣化工作，同时也要和业务一起做好风雅化管理，将有限的资源，分配给最优先级的业务，要做好ab实行管控、优先级管理、及时下线等。
为了将到达最优的启动速率，我们运用了各式各样的战略，将时间和空间塞得满满的，但是这改变了原来的通例流程，带来了额外代码复杂度提拔，比如预加载战略，反面维护同砚须要思量，预加载失败以及乐成两种情况，又大概是缓存战略，反面维护的同砚须要思量缓存掷中、不掷中的情况，如果不绝使用if堆积代码，那代码终极将无法维护。以是我们须要通过框架来管理复杂度，只管让业务层无感知。比如数据中心层，业务无需关心数据是否来自缓存还是及时哀求，拿来使用即可。
通常我们以启动速率来权衡启动性能。为了提拔启动速率，我们大概会把一些本来在启动阶段实行的使命举行延后大概按需，这种方式可以大概有效优化启动速率，但同时也大概陵犯后续的使用体验。比如，如果将某个启动阶段的配景使命延后到后续使用时，如果初次使用是在主线程，则大概会造成使用卡顿。因此，我们在关注启动性能的同时，也须要关注其他大概影响的指标。性能上我们须要有一个能表现全局性能的宏观指标，以防止局部最优效应。
参考资料
团队先容
我们是淘天团体-内容技能团队，专注于推动淘宝内容生态和电商体验的深度融合。我们致力于为环球用户提供丰富、多样性、高风致的购物内容体验，旨在通过技能创新，更好地毗连用户和商品，以提拔用户的购物满足度平静台的商业代价。通过尖端技能提拔内容创作、分发与消耗的服从，赋能内容创作者、商家与消耗者，构建一个繁荣、康健、可一连发展的内容生态圈。
| 欢迎光临 淘宝卖家开店运营论坛_淘宝卖家经验交流学习社区 (https://tao92.com/) | Powered by Discuz! X3.3 |