写在前面如何定义好的体验以前我们定义这个问题更多的是从页面加载速度和流畅度来解释,但这远远不够.加载速度的提升是不是让用户更愿意“玩”,流畅度的提升是不是也增加了模块的曝光度和交易量。为了有一个更立体的衡量标准,做出如下假设:页面加载速度和流畅度提升(技术视角)->用户跳出率降低(用户视角)->产品曝光和点击提升(平台视角)。以下是一些困境TOP第二方和第三方服务的性能数据(取自2020年5月的数据)可以说是比较差的。(“跳转”的定义是:用户打开小程序后,页面渲染未完成或不满足产生交互的条件)小程序复杂的技术架构保证了逻辑/渲染分离架构下的开放性和安全性同时,也引入了更大的性能挑战。三方生态的质量安全小程序是淘宝开放体系的重要组成部分。它们面向商家和外部开发者,对研发质量保证和数据安全提出了更大的挑战。衡量指标单一。过去,我们更多地从页面加载速度和流畅度来定义和解释这个问题,但这远远不够。通过运维数据标准化,形成贯穿研发->发布->上线全流程的数据闭环:数据采集:定义采集算法和数据模型,形成一套标准化的运维数据运维运维平台:对接二/第三方开发者,提供数据穿透和回流能力,定义监控&卡口规则数据分析:科学的数据分析方法论,有实验、有数据、有证据效率工具:打通研发基础设施,赋能开发者采集数据T2(首屏算法)阿里集团小程序对标首屏加载测量口径,采用UC核心的T2首屏算法。T2指标定义为从页面开始加载到页面首次呈现全屏内容的时间。简单的说,在页面加载过程中,记录所有渲染的帧,在页面加载完成后,对每一帧进行回溯检查,将图像渲染区域第一次达到最大值的帧记录为T2。小程序性能模型为了分阶段拆解小程序启动性能,定义了小程序性能模型。从小程序启动到首屏渲染完成,拆解为:Downloading(资源请求:元信息请求和包下载)、Launch(容器启动和appletRuntime启动)、Rendering(业务逻辑执行和渲染)。同时,为小程序开发者提供了标准的WebAPIperformance.mark(),支持开发者自定义mark。通过分析每个阶段所花费的时间,可以更清楚地发现性能瓶颈。数据分析优化实践篇幅有限,仅分享几个经典案例。页面性能与用户跳出的关系根据小程序加载性能与用户跳出的直方图,可以更直观的分析出小程序加载性能与用户跳出的关系。如下图所示,可以看出,当小程序加载时间超过2s时,跳出率呈指数增长。也是基于这个结论,我们将小程序交互时长的总体目标定为1.8s。(横轴代表互动时长,纵轴代表这段时间内跳出的用户比例)小程序启动漏斗小程序启动漏斗可以更直观的分析耗时和跳出率/每个阶段的白化。屏率与其他指标的关系。下图举例:下载请求阶段耗时过长,是白屏率/跳出率的重要因素。旗舰店小程序接入资源预热,下载时间缩短50%,舞台弹跳/白屏缩小至0.08%以内;旗舰店小程序业务数据请求访问数据预取时间较长,店铺框架数据请求时间基本降为0,跳台/白屏基本降为0。最佳实践:小程序引擎实例复用与预置startup小程序进程启动后,空闲时会初始化并只保留一个普通的小程序引擎环境(与业务无关),直到小程序进程被激活。杀;在运行过程中,小程序引擎实例会在3种状态之间切换:Runnable:小程序进程启动后,新创建的小程序运行环境处于“Runnable”状态;Running:小程序业务启动时,取出状态为“Running”的实例,修改状态为“Running”;Reset:关闭小程序业务后,取出已使用的实例,状态变为“Resetting”;Status重置完成后,会变为“runnable”,供下一个小程序使用。BestPractice:DataPrefetch2.0根据小程序性能模型分析,在小程序启动过程中,Worker启动总是快于Render完成(Worker空闲),空闲时间分布Worker如下:可以看出,在线的Worker有92.2%的概率会空闲,空闲时间集中在300-500ms,可以完成1-2个网络请求;空闲的Worker具有完整的小程序JS执行能力,可以在有限的范围内执行小程序JSAPI。发送网络请求获取位置信息/系统信息等;动态预取灵活优势:环境具备JS执行能力,更灵活丰富:提供有限的JSAPI调用能力安全:支持权限控制,对第三方开放更安全最佳实践:基于模板的快照渲染快照渲染可以提高页面二次打开的性能,但是在旗舰店场景下有以下缺点:(1)数据真实性:快照渲染使用的是上次打开的旧数据,旧内容会被首先显示。刷新;(2)磁盘占用率和命中率:旗舰店是一个模板小程序,实例化小程序数以百万计。快照渲染会为每个店铺生成不同的快照文件;在基数大的情况下,考虑磁盘使用率建立的淘汰机制,使得快照的命中率较低;(3)长尾问题:对于访问频率低的长尾店,同一用户二次访问的概率低,无法命中快照;为解决上述问题,实现了“基于模板的快照渲染(TemplateSnapshot)”。根据模板小程序生成快照文件并删除数据。当渲染快照时,真实数据通过数据预取被插入到模板中。既可以保证数据的真实性,又可以让所有门店共享同一个快照文件,最大限度地提高快照命中率,减少磁盘占用。工具平台建立标准化运维数据,输出到不同场景,贯穿整个研发上线流程:工具端:提供性能调试工具,帮助开发者快速分析解决问题发布关卡:设置预发布质量关卡和静态扫描,避免业务带病上线。在线监控:通过小程序运维平台,承担日常高可用数据的监控告警职责。1.9秒;旗舰店首屏由4s+提升至1.8s。同时,为验证体验优化对业务数据的积极影响,对旗舰店业务进行了水桶实验,数据证明也取得了良好的业务效果。下图为Top二三方服务优化前后的数据对比:
