马上注册,结交更多淘宝商家,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
明灏 大淘宝技能 2024年07月15日 18:04 浙江
近来做了一些移动端页面的首帧优化的工作,有许多心得和感受,此中有许多共性的东西,总结成一篇文章渴望可以资助到更多业务,也渴望引起读者一起讨论。
为何要做首帧优化
作为步伐匠人,不停在积极寻求做一款好的产物,打磨各个细节,做好用户体验,而首帧是用户打仗到产物的第一个页面,是体验的重中之重。也正因是产物的第一个页面,转化率靠近100%,从ROI的角度来说,做好首帧优化也是一个很划算的deal。
做好首帧优化,至少可以带来以下利益: - 创建用户好感度:良好的第一印象,提拔品牌形象
- 提拔业务转化率:提拔业务曝光率、点击率、带来更好的业务结果
- 更小的资源斲丧、镌汰资源:更长的首帧启动时间意味着更多的资源斲丧,更多的资源投入。优化首帧可以镌汰一些不须要的资源开销和消耗,节流技能资源。
首帧口径和权衡标准
口径
做优化前我们须要先想想,用户对首帧体验预期是怎样的?首帧界说是什么,起始范围是什么。差别的口径会影响我们的指标,操持方案,工作量。界说了口径之后,我们可以确定优化事项范围以及界限。
Loading图: 即开始出现loading、显现灰底图或是页面框架图,如果这页面展示也比力久的话,则分析用户交互出现卡顿、假死,迟迟充公到反馈,用户交互被壅闭,属于严峻影响用户体验的运动。以是发起在展示骨架图之前,除了framework以外,不要有io、网络等耗时的前置依赖,也不须要有中转页的运动逻辑。 内容主体出现: 即页面大部分的内容已经渲染出来,用户可以得到充足的信息,这是一个比力符适用户体感的口径,大多数业务选取的就是这个口径。不外差别业务对于“大部分”,“主体”的界说有所差别,业务可以联合自身需求举行公道选择: - 对于“主体”界说:如头图、标题、相机取景器、
- 对于“大部分”界说:如按照展示“面积”盘算的,完备度80%、90%、100%(有一些分页加载战略的业务场景)
页面可交互: 这个阶段表现页面已经完全渲染完成,而且用户可以进一步交互,如点赞、分享、收藏、加购等运动。
权衡标准
绝对耗时: 指定口径下的绝对耗时时长,单位一样平常是ms,多是用于单机线下的验证和比力,差别机型之间、差别场景下的差异较大,如高端机与低端机之间的差异可以相差好几倍,如要反应样本的团体性,多用分位值大概秒开率来权衡。
分位值/秒开率: - 多用于线上观测,反应样本的团体性和趋势,长尾数据、非常case不容易被忽略
- 应该让P90P95分位值,靠近于中位数,让团体样本的差异性小一些
取值标准: - 绝对耗时<500ms,一样平常情况下页面切换动画300ms,以是页面首帧500ms以内渲染完成,可以大概有一个较好的体验,google官方也发起页面尽大概在500ms以内完成冷启动。
- 秒开率>95%+,即95分位<=1000ms
- 能窥伺出划一业务复杂度下,广泛用户能继续的一个范围
- 通过屏幕录制方式可获取
- 标准也并不是一成稳固的,随着硬件性能不绝提拔、framework不绝优化、亦或是业务形态的厘革,而不绝调解。
怎样分析排查性能题目(以Android为例)
相识近况
起首要把握自身产物以及行业竞品的首帧数据,相识在行业中的一个排名情况,再决定是否要进一步做优化,做到什么样的水平。为了包管自身和竞品采取的同一种口径获取首帧耗时,我们这边采取了录屏的方式。
录屏分析方案:在同一台手机上使用特定帧率录屏(如30fps,即1帧33ms),再通过数帧数的方式来盘算出首帧耗时的时间,录屏的越高越正确。
自动化脚本方案: 通过自动化录屏脚本工具、使用模拟点击 + OCR笔墨辨认/图像辨认的方案,辨认首/尾帧、进而自动化天生耗时的中位数、匀称值。
相识原理
在分析题目之前,我们要搞清晰体系是怎样将首帧绘制在屏幕上的,相识了这些我们才气针对性的分析题目。
- Activity启动流程:https://juejin.cn/post/7063699032144609287
- View渲染流程:
- https://blog.csdn.net/u012216131/article/details/115704825
- https://www.cnblogs.com/mysweetAngleBaby/p/15549126.html
使用性能分析工具
- 官方工具:
从代码、资源等细粒度的维度(如方法级别、变乱级别),来定量分析步伐对CPU、内存、网络IO等焦点盘算资源的斲丧情况,可以比力完备、全面的分析启动过程,但这种方式得到的数据比力细碎、散点,须要颠末肯定的归纳、归并才气得到一个具体可实行的方案。 - TraceView:Instrumentation 模式下采取 AddListener 的方式注册 MethodError、MethodExited、MethodUnwind 的回调来收罗方法起止时间;Sampling 模式下使用一个 SamplingThread 定时主权线程堆栈,通过对此的堆栈对比近似确定函数的进入和退出时间;固然是官方提供的工具,但两种模式本身都存在比大的性能消耗,大概带偏优化方向。
- CPU Profiler:团体通过 JVM Agent 实现,具有完成方法调用栈输出,且支持 Java、C/C++方法的耗时检测,上手比力简朴,但其同样存在性能消耗较大的题目,且一样平常仅用于 debug 包,release 包须要额外添加 debuggable 的设置。
- Systrace:基于 Android 体系层的 Atrace 实现,Atrace 又基于 Linux kernal 层的 ftrace 实现,ftrace 在内核中通过函数插桩获取耗时;其自身性能消耗比力低、数据源丰富且具有较好的可视化页面,但其默认监控点较少,在 APP 自有代码中的监控点须要手动参加,比力贫困。
- 二方/三方工具:
如果我们的页面是通过第二/三方的页面框架所构建,如weex/rn/flutter等框架。我们可以通过第二方框架提供的性能分析工具、插件去分析和归因。 - rn:https://reactnative.dev/docs/performance
- flutter:https://docs.flutter.dev/perf/ui-performance
- compose ui: https://developer.android.com/develop/ui/compose/performance
- 业务自界说工具:
偶尔为了增补官方工具火焰图太细碎、难以聚类、须要泯灭更多时间去分析和追踪,我们可以根据业务视角、使用自界说的业务阶段/流程,去粗粒度的去分析各个阶段的耗时。 - 埋点/日记工具:焦点链路节点performance日记,如:页面视图创建、网络耗时、数据处理处罚、渲染
- 切面/插装代码工具:面向常用对象/变乱/流程,对业务无侵入式的观测和统计
常见的优化方案和战略
分析完缘故起因后,我们须要对差别缘故起因给出优化方案,首帧优化的焦颔首脑用一句话总结是:在尽大概在短的时间里预备好首帧渲染所须要最小的资源模子。围绕“最短时间”和“最小的模子”两个中心头脑下,总结了一些常见的优化战略:
预加载/缓存战略
在前置页面的公道机会(一样平常是闲时)提前获取数据、下载资源,并剖析,然后缓存到内存大概磁盘里,以便后置页面快速读取数据和资源。
这个战略大概带来以下副作用: - 提前获取的数据大概会引发服务端qps暴增,带来额外资源开销,和影响稳固性。
- 如果页面点击率不高的话,缓存掷中率会比力低,造成资源浪费的题目。
- 大概会造成前置页面的性能受损。
- 这个战略联合特定人群一起使用会更好一些。
耽误初始化(懒加载)
与首帧无关的代码逻辑、资源可以在首帧渲染后举行初始化,具体的初始化机会可以在使用时再初始化,如某些二级页面的创建、多余tab的创建等。
并行处理处罚&异步化
并行处理处罚:充实使用多核CPU,通过多线程并行处理处罚耗时的使命,提拔CPU的负荷。如容器初始化和数据哀求剖析可以同时举行。
异步化:一些比力耗时、IO使命,不要占用宝贵的主线程资源。
View渲染优化
Android内里ViewTree构建和渲染是比力耗时过程的,如下: - 将 xml 文件剖析到内存中 XmlResourceParser 的 IO 过程;
- 根据 XmlResourceParser 的 Tag name 获取 Class 的 Java 反射过程;
- 创建 View 实例,终极天生 View 树;
- View渲染:layout、measure、draw
优化方案: - 层级优化/布局优化 (merge嵌套),镌汰布局层级,镌汰递归深度
- 使用ViewStub,耽误按需inflate,低落inflate耗时
- x2c:xml转code构建
- 异步inflate,异步ui构建
数据借用
为了加速数据获取,我们可以从前一个页面借用一部分数据过来将主体内容做添补,随后再用真实数据革新。这个方案多实用于列表进入详情的场景。
这里的数据不但包罗笔墨和图片,也可以延伸到媒体播放器、camera取景器等其他一些文件流、数据流,以致可以是widget组件(共享元素动画)。 分块渲染
如果页面元素比力多,数据量比力大,一次性哀求加载的时间比力长,这个时间我们可以通太过块的方式,将大页面拆成多少个小页面模块、将服务端接口拆成多少个小接口,各个页面模块独立渲染。可以有效低落服务端RT耗时,以及页面渲染耗时。
骨架图优化
使用骨架图作为打底图和纯白底图相比,有告终构样式等信息,更加靠近于首帧的结果,正式数据革新时,页面也不会出现显着革新,体验比力好。
线上验收
线下的优化,并不意味着线上真实用户也能同步看到优化的结果,由于业务路径的差异、机型的差异,你线下的优化大概不具备广泛性,以是须要线上真实结果的反馈。
- 较全面信息的数据大盘创建:
包罗:版本、装备分、业务场景、机型、时间等尽大概多的数据维度的数据大盘,可以只管还原优化or劣化的信息全貌,提供更多的归因信息。
- 分位值(数据聚合种别):
长尾数据、小众case每每容易被团体数据给覆盖,不敷以引起器重,为了我们应该分别分析中位数、分位数。
- AB实行:
如许做不但能控制变量确保优化项的严酷有效,还能借此来观察性能优化所带来的业务指标收益,这些都可以作为规划后续启动优化方向的参考引导。
防劣化
人无完人,人都会失误犯错,绝对不能把体系性能交给某一个人身上,一个人犯错概率高,一群人都犯错的概率低,应该交给一群人共同协作的机制和流程。
防劣化相比于优化是更能长期有益的,以是更应该在较早期创建起防劣化机制: - 克制在启动焦点阶段添加代码,齐备代码添加须要走检察流程,启动阶段包罗:
- Windvane.execute,
- Activity.onCreate,
- Fragment.onCreate/onCreateView
- 检察机制:提审/测试/答应/灰度/上线
- 大盘监控:趋势分析
- 分阶段监控:归因分析
- 监控诉警:及时止损
结语
一连迭代
首帧优化并非一挥而就,而是一个须要一连迭代与打磨的过程,在初期阶段优化空间相对较大,只须要投入一些不多的资源,即可看到较大的收益,但随着优化不绝深入,到了中期阶段,就须要有相称水平的投入,去攻坚各个难点,聚少成多,才气看到收益。后期随着业务越来越复杂,分支越来越多,要做防劣化工作,同时也要和业务一起做好风雅化管理,将有限的资源,分配给最优先级的业务,要做好ab实行管控、优先级管理、及时下线等。
做好复杂度管理
为了将到达最优的启动速率,我们运用了各式各样的战略,将时间和空间塞得满满的,但是这改变了原来的通例流程,带来了额外代码复杂度提拔,比如预加载战略,反面维护同砚须要思量,预加载失败以及乐成两种情况,又大概是缓存战略,反面维护的同砚须要思量缓存掷中、不掷中的情况,如果不绝使用if堆积代码,那代码终极将无法维护。以是我们须要通过框架来管理复杂度,只管让业务层无感知。比如数据中心层,业务无需关心数据是否来自缓存还是及时哀求,拿来使用即可。
全局意识
通常我们以启动速率来权衡启动性能。为了提拔启动速率,我们大概会把一些本来在启动阶段实行的使命举行延后大概按需,这种方式可以大概有效优化启动速率,但同时也大概陵犯后续的使用体验。比如,如果将某个启动阶段的配景使命延后到后续使用时,如果初次使用是在主线程,则大概会造成使用卡顿。因此,我们在关注启动性能的同时,也须要关注其他大概影响的指标。性能上我们须要有一个能表现全局性能的宏观指标,以防止局部最优效应。
参考资料
- Profile性能追踪工具集:
- https://developer.android.com/studio/profile
- Android Performance 指南:
- https://developer.android.com/topic/performance/overview
- RN Performance 指南:
- https://reactnative.dev/docs/performance
- Flutter Performance 指南:
- https://docs.flutter.dev/perf/ui-performance
- Android Activity的创建流程:
- https://juejin.cn/post/7063699032144609287
- View 的渲染机制:
- https://blog.csdn.net/u012216131/article/details/115704825
- Android 底层渲染原理:
- https://www.cnblogs.com/mysweetAngleBaby/p/15549126.html
- 抖音Android启动优化之理论和工具篇:
- https://mp.weixin.qq.com/s?__biz=MzI1MzYzMjE0MQ==&mid=2247491335&idx=1&sn=e3eabd9253ab2f83925af974db3f3072
团队先容
我们是淘天团体-内容技能团队,专注于推动淘宝内容生态和电商体验的深度融合。我们致力于为环球用户提供丰富、多样性、高风致的购物内容体验,旨在通过技能创新,更好地毗连用户和商品,以提拔用户的购物满足度平静台的商业代价。通过尖端技能提拔内容创作、分发与消耗的服从,赋能内容创作者、商家与消耗者,构建一个繁荣、康健、可一连发展的内容生态圈。 免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |