当前位置: 首页 > Web前端 > JavaScript

支付宝小程序性能分析

时间:2023-03-27 00:35:13 JavaScript

首屏算法讲解首屏是页面第一次渲染全屏内容,是计算T2的关键节点。简单的说,在页面加载过程中,记录所有渲染的帧,在页面加载完成后,对每一帧进行追溯,将图像渲染区域第一次达到最大值的帧记录为T2T2。T2的起点是PerformanceTiming.naviagtionStart,即主HTML文档开始加载的时间。在WebView加载页面的场景中,与WebView.loadUrl的时机非常接近。T2开始记录渲染帧。T2开始记录渲染帧的时间点为FirstFullScreenLayout,即布局高度大于一屏。在这个时间点之前,页面一般没有内容可以显示,所以不需要记录渲染帧T2的条件来结束计算。T2结束计算的常见条件如下:Pageexit。例如,当用户关闭页面时,页面不可见。例如,当应用程序切换到后台时,存在用户交互。例如,用户点击或滑动页面T2,计算耗时超时。T2帧记录的计算不能消耗太多时间,超过阈值50ms计算结束,T2帧数超过阈值后不再记录后续帧。T2帧不能记录太多,会损失性能。如果阈值超过50帧,则计算结束,不会记录后续帧。WebView所在的Window失去焦点。比如页面上有一个Native弹框,要特别注意的是T2结束计算的时间不一定是T2结束的时间,很有可能不一样。T2计算完成后,需要回头查看,找出图像渲染区域第一次达到最大值的那一帧,然后记录为T2影响耗时Core时间的因素——consumingpackagesizeistoolarge:includingtheentirepackage/mainpackage)和内部包文件(worker)太大。包文件将包含一些静态资源。相对来说,后者影响更大,因为每次运行都会有一个worker的解析进程同步api调用(my.Sync),阻塞执行。UC冷启动:支付宝首页首屏小程序的uc冷启动(init_uc)耗时比会高,因为虽然app已经开始了uc初始化,但是在访问首页小程序的时候肯定会比较延迟。(如果想减少耗时,申请默认踢出支付宝首页)。在核心耗时阶段,UC冷启动比热启动(饿了么小程序)多耗时145%。业务耗时主链接耗时:免费登录、主界面调用页面渲染、串口链接。首屏内容不足:主界面数据模块不足。渲染数据量:setData次数&内容过多,影响渲染效率图片过多:直接影响T2统计的首屏满满度判断