收集的指标¶
警告:此页面仍在积极开发中。
本文档包含有关 Browsertime 测试中收集的指标的信息,以及有关如何收集这些指标的详细信息。
页面加载测试¶
对于 Browsertime 页面加载测试,我们收集的指标集有限(可以轻松扩展)。目前,我们将这些指标分为两组:(i)视觉指标和(ii)技术指标。这些指标通过两种类型的测试收集,称为温加载和冷加载测试。我们将这两种测试合并到一个名为“嵌合”的模式中,您可以在 Treeherder 任务中找到它。
下面,您可以找到我们如何运行温加载、冷加载和嵌合加载测试的过程。
温加载¶
在这种页面加载测试类型中,我们打开浏览器,然后重复导航到同一页面,而无需在循环之间重新启动浏览器。
创建一个新的或已条件化的浏览器配置文件
启动浏览器
启动后浏览器稳定暂停 30 秒,如果使用已条件化的配置文件则暂停 1 秒
打开一个新标签页
加载测试 URL;获取测量值
重新加载标签页
X
次(对于X
次重复);每次获取测量值
注释:- 首次页面加载的测量值不包含在总体结果指标中,因为存在首次加载噪声;但是它们会列在 JSON 工件中 - 字节码缓存在第一个测试循环中填充,后续迭代将已经构建了缓存以减少噪声。
冷加载¶
在这种页面加载测试类型中,我们打开浏览器,导航到页面,然后在执行下一个循环之前重新启动浏览器。
创建一个新的或已条件化的浏览器配置文件
启动浏览器
启动后浏览器稳定暂停 30 秒,如果使用已条件化的配置文件则暂停 1 秒
打开一个新标签页
加载测试 URL;获取测量值
关闭浏览器
对剩余的浏览器循环重复整个过程
注释:所有浏览器循环的测量值都用于计算总体结果
嵌合加载¶
页面加载测试的一种新模式称为嵌合模式。它将温加载和冷加载变体组合到一个测试中。此测试模式用于我们的 Taskcluster 任务中。
创建一个新的或已条件化的浏览器配置文件
启动浏览器
启动后浏览器稳定暂停 30 秒,如果使用已条件化的配置文件则暂停 1 秒
打开一个新标签页
加载测试 URL;获取
Cold pageload
的测量值导航到辅助 URL(以保留内容进程)
再次加载测试 URL;获取
Warm pageload
的测量值关闭桌面浏览器
对剩余的浏览器循环重复整个过程
注释:温加载中提到的字节码缓存在此处仍然适用。
技术指标¶
这些指标是从浏览器获取的。这包括首次绘制、DOM 内容刷新等指标。
视觉指标¶
当您使用 --browsertime-visualmetrics
运行 Raptor Browsertime 时,它会录制页面加载的视频,然后处理此视频以构建指标。视频是使用 FFMPEG(使用 --browsertime-no-ffwindowrecorder
)或 Firefox 窗口录制器(默认)生成的。
基准测试¶
与上面的页面加载测试不同,基准测试会收集自己的自定义指标。请与这些基准测试的所有者联系以确定它们的含义以及如何生成它们,或者联系 Element 上 #perftest 中的性能测试和工具团队。
指标定义¶
以下文档列出了当前在 Raptor Browsertime 测试中发出警报的所有可用指标。
内容丰富的速度指数¶
类似于 SpeedIndex,但它使用帧的内容丰富程度来确定视觉完整性,而不是直方图差异。内容丰富程度是通过计算帧中找到的边缘数量来确定的。检测到的边缘数量越少,内容丰富程度值越小(视觉完整值越小)。
**别名**:ContentfulSpeedIndex
- 使用它的测试:
**自定义**:connect、process-switch、throttled、welcome
**桌面**:amazon、bing-search、buzzfeed、cnn、docomo、ebay、espn、expedia、facebook、fandom、google-docs、google-mail、google-search、google-slides、imdb、imgur、instagram、linkedin、microsoft、netflix、nytimes、office、openai、outlook、paypal、pinterest、reddit、samsung、tiktok、tumblr、twitch、twitter、weather、wikia、wikipedia、yahoo-mail、youtube
**交互式**:cnn-nav、facebook-nav、reddit-billgates-ama、reddit-billgates-post-1、reddit-billgates-post-2
**实时**:booking-sf、discord、fashionbeans、google-accounts、imdb-firefox、medium-article、people-article、reddit-thread、rumble-fox、stackoverflow-question、urbandictionary-define、wikia-marvel
**移动**:allrecipes、amazon、amazon-search、bild-de、bing、bing-search-restaurants、booking、cnn、cnn-ampstories、dailymail、ebay-kleinanzeigen、ebay-kleinanzeigen-search、espn、facebook、facebook-cristiano、google、google-maps、google-search-restaurants、imdb、instagram、microsoft-support、reddit、sina、stackoverflow、wikipedia、youtube、youtube-watch
估计帧延迟(任意)¶
类似于 estimatedFirstFrameLatency,但它使用视频播放期间的所有已识别帧,并通过使用视频本身的预期时间偏移来标准化为对第一帧何时显示的估计。
估计帧延迟(首帧)¶
用于表示视频首帧显示延迟的指标。通过使用页面加载的视频计算得出,通过将给定的纯RGB颜色与模糊值匹配来识别关键帧。
首次绘制¶
表示浏览器首次执行包含内容的绘制的时间(以毫秒为单位)。
别名: 首次内容合成,首次内容绘制,fcp
- 使用它的测试:
**桌面**:amazon、bing-search、buzzfeed、cnn、docomo、ebay、espn、expedia、facebook、fandom、google-docs、google-mail、google-search、google-slides、imdb、imgur、instagram、linkedin、microsoft、netflix、nytimes、office、openai、outlook、paypal、pinterest、reddit、samsung、tiktok、tumblr、twitch、twitter、weather、wikia、wikipedia、yahoo-mail、youtube
**交互式**:cnn-nav、facebook-nav、reddit-billgates-ama、reddit-billgates-post-1、reddit-billgates-post-2
**实时**:booking-sf、discord、fashionbeans、google-accounts、imdb-firefox、medium-article、people-article、reddit-thread、rumble-fox、stackoverflow-question、urbandictionary-define、wikia-marvel
**移动**:allrecipes、amazon、amazon-search、bild-de、bing、bing-search-restaurants、booking、cnn、cnn-ampstories、dailymail、ebay-kleinanzeigen、ebay-kleinanzeigen-search、espn、facebook、facebook-cristiano、google、google-maps、google-search-restaurants、imdb、instagram、microsoft-support、reddit、sina、stackoverflow、wikipedia、youtube、youtube-watch
首次视觉变化¶
测试中检测到的首次视觉变化时间(以毫秒为单位)。
别名: FirstVisualChange
- 使用它的测试:
**自定义**:connect、process-switch、throttled、welcome
**桌面**:amazon、bing-search、buzzfeed、cnn、docomo、ebay、espn、expedia、facebook、fandom、google-docs、google-mail、google-search、google-slides、imdb、imgur、instagram、linkedin、microsoft、netflix、nytimes、office、openai、outlook、paypal、pinterest、reddit、samsung、tiktok、tumblr、twitch、twitter、weather、wikia、wikipedia、yahoo-mail、youtube
**交互式**:cnn-nav、facebook-nav、reddit-billgates-ama、reddit-billgates-post-1、reddit-billgates-post-2
**实时**:booking-sf、discord、fashionbeans、google-accounts、imdb-firefox、medium-article、people-article、reddit-thread、rumble-fox、stackoverflow-question、urbandictionary-define、wikia-marvel
**移动**:allrecipes、amazon、amazon-search、bild-de、bing、bing-search-restaurants、booking、cnn、cnn-ampstories、dailymail、ebay-kleinanzeigen、ebay-kleinanzeigen-search、espn、facebook、facebook-cristiano、google、google-maps、google-search-restaurants、imdb、instagram、microsoft-support、reddit、sina、stackoverflow、wikipedia、youtube、youtube-watch
最大内容绘制¶
页面上最大内容块渲染/绘制的时间(以毫秒为单位)。
别名: largestContentfulPaint,lcp
- 使用它的测试:
桌面: amazon,bing-search,buzzfeed,cnn,docomo,ebay,espn,expedia,facebook,fandom,google-docs,google-mail,google-search,google-slides,imdb,imgur,instagram,linkedin,microsoft,netflix,nytimes,office,openai,outlook,paypal,pinterest,reddit,samsung,tiktok,tumblr,twitter,weather,wikia,wikipedia,yahoo-mail,youtube
**移动**:allrecipes、amazon、amazon-search、bild-de、bing、bing-search-restaurants、booking、cnn、cnn-ampstories、dailymail、ebay-kleinanzeigen、ebay-kleinanzeigen-search、espn、facebook、facebook-cristiano、google、google-maps、google-search-restaurants、imdb、instagram、microsoft-support、reddit、sina、stackoverflow、wikipedia、youtube、youtube-watch
最后视觉变化¶
测试中检测到的最后视觉变化时间(以毫秒为单位)。
别名: LastVisualChange
- 使用它的测试:
自定义: process-switch,welcome
**桌面**:amazon、bing-search、buzzfeed、cnn、docomo、ebay、espn、expedia、facebook、fandom、google-docs、google-mail、google-search、google-slides、imdb、imgur、instagram、linkedin、microsoft、netflix、nytimes、office、openai、outlook、paypal、pinterest、reddit、samsung、tiktok、tumblr、twitch、twitter、weather、wikia、wikipedia、yahoo-mail、youtube
**交互式**:cnn-nav、facebook-nav、reddit-billgates-ama、reddit-billgates-post-1、reddit-billgates-post-2
**实时**:booking-sf、discord、fashionbeans、google-accounts、imdb-firefox、medium-article、people-article、reddit-thread、rumble-fox、stackoverflow-question、urbandictionary-define、wikia-marvel
**移动**:allrecipes、amazon、amazon-search、bild-de、bing、bing-search-restaurants、booking、cnn、cnn-ampstories、dailymail、ebay-kleinanzeigen、ebay-kleinanzeigen-search、espn、facebook、facebook-cristiano、google、google-maps、google-search-restaurants、imdb、instagram、microsoft-support、reddit、sina、stackoverflow、wikipedia、youtube、youtube-watch
加载时间¶
页面完成加载所需的时间(以毫秒为单位)。
别名: loadtime
- 使用它的测试:
**桌面**:amazon、bing-search、buzzfeed、cnn、docomo、ebay、espn、expedia、facebook、fandom、google-docs、google-mail、google-search、google-slides、imdb、imgur、instagram、linkedin、microsoft、netflix、nytimes、office、openai、outlook、paypal、pinterest、reddit、samsung、tiktok、tumblr、twitch、twitter、weather、wikia、wikipedia、yahoo-mail、youtube
**交互式**:cnn-nav、facebook-nav、reddit-billgates-ama、reddit-billgates-post-1、reddit-billgates-post-2
**实时**:booking-sf、discord、fashionbeans、google-accounts、imdb-firefox、medium-article、people-article、reddit-thread、rumble-fox、stackoverflow-question、urbandictionary-define、wikia-marvel
**移动**:allrecipes、amazon、amazon-search、bild-de、bing、bing-search-restaurants、booking、cnn、cnn-ampstories、dailymail、ebay-kleinanzeigen、ebay-kleinanzeigen-search、espn、facebook、facebook-cristiano、google、google-maps、google-search-restaurants、imdb、instagram、microsoft-support、reddit、sina、stackoverflow、wikipedia、youtube、youtube-watch
感知速度指数¶
类似于SpeedIndex,但它使用结构相似性指数度量(ssim)来确定视觉完整性。此技术比较帧的亮度、对比度和结构(给定帧与最终帧)以确定完整性。
别名: PerceptualSpeedIndex
- 使用它的测试:
**自定义**:connect、process-switch、throttled、welcome
**桌面**:amazon、bing-search、buzzfeed、cnn、docomo、ebay、espn、expedia、facebook、fandom、google-docs、google-mail、google-search、google-slides、imdb、imgur、instagram、linkedin、microsoft、netflix、nytimes、office、openai、outlook、paypal、pinterest、reddit、samsung、tiktok、tumblr、twitch、twitter、weather、wikia、wikipedia、yahoo-mail、youtube
**交互式**:cnn-nav、facebook-nav、reddit-billgates-ama、reddit-billgates-post-1、reddit-billgates-post-2
**实时**:booking-sf、discord、fashionbeans、google-accounts、imdb-firefox、medium-article、people-article、reddit-thread、rumble-fox、stackoverflow-question、urbandictionary-define、wikia-marvel
**移动**:allrecipes、amazon、amazon-search、bild-de、bing、bing-search-restaurants、booking、cnn、cnn-ampstories、dailymail、ebay-kleinanzeigen、ebay-kleinanzeigen-search、espn、facebook、facebook-cristiano、google、google-maps、google-search-restaurants、imdb、instagram、microsoft-support、reddit、sina、stackoverflow、wikipedia、youtube、youtube-watch
速度指数¶
用于表示页面加载速度的指标。值越低表示页面加载速度越快。单位为(视觉完整性 x 毫秒)。通过使用页面加载的视频计算得出,这些视频提供了视觉完整性的度量。视觉完整性是通过比较给定帧的直方图与页面加载的最终帧来计算的。速度指数计算为y=1的常数线与从0毫秒到视觉完整性达到100%(或到达y=1线)的视觉完整性图的曲线之间的面积。
别名: SpeedIndex
- 使用它的测试:
**自定义**:connect、process-switch、throttled、welcome
**桌面**:amazon、bing-search、buzzfeed、cnn、docomo、ebay、espn、expedia、facebook、fandom、google-docs、google-mail、google-search、google-slides、imdb、imgur、instagram、linkedin、microsoft、netflix、nytimes、office、openai、outlook、paypal、pinterest、reddit、samsung、tiktok、tumblr、twitch、twitter、weather、wikia、wikipedia、yahoo-mail、youtube
**交互式**:cnn-nav、facebook-nav、reddit-billgates-ama、reddit-billgates-post-1、reddit-billgates-post-2
**实时**:booking-sf、discord、fashionbeans、google-accounts、imdb-firefox、medium-article、people-article、reddit-thread、rumble-fox、stackoverflow-question、urbandictionary-define、wikia-marvel
**移动**:allrecipes、amazon、amazon-search、bild-de、bing、bing-search-restaurants、booking、cnn、cnn-ampstories、dailymail、ebay-kleinanzeigen、ebay-kleinanzeigen-search、espn、facebook、facebook-cristiano、google、google-maps、google-search-restaurants、imdb、instagram、microsoft-support、reddit、sina、stackoverflow、wikipedia、youtube、youtube-watch
YouTube 播放指标¶
以VP9/H264开头的指标分别给出帧丢失数和绘制帧数。
别名: H264,VP9
- 使用它的测试:
基准测试: youtube-playback-hfr
CPU 时间¶
指定自进程启动以来,进程所有线程的累积CPU使用情况(以毫秒为单位)。
别名: cpuTime
- 使用它的测试:
基准测试: speedometer,speedometer3,youtube-playback-h264-1080p30,youtube-playback-h264-1080p60,youtube-playback-h264-full-1080p30,youtube-playback-h264-full-1080p60,youtube-playback-v9-1080p30,youtube-playback-v9-1080p60,youtube-playback-v9-full-1080p30,youtube-playback-v9-full-1080p60
自定义: addMab1,addMabN,addMar1,addMarN,addMbl1,addMblN,addkAB1,addkABN,addkAR1,addkARN,addkBL1,addkBLN,getkeyrng
**桌面**:amazon、bing-search、buzzfeed、cnn、docomo、ebay、espn、expedia、facebook、fandom、google-docs、google-mail、google-search、google-slides、imdb、imgur、instagram、linkedin、microsoft、netflix、nytimes、office、openai、outlook、paypal、pinterest、reddit、samsung、tiktok、tumblr、twitch、twitter、weather、wikia、wikipedia、yahoo-mail、youtube
**交互式**:cnn-nav、facebook-nav、reddit-billgates-ama、reddit-billgates-post-1、reddit-billgates-post-2
**移动**:allrecipes、amazon、amazon-search、bild-de、bing、bing-search-restaurants、booking、cnn、cnn-ampstories、dailymail、ebay-kleinanzeigen、ebay-kleinanzeigen-search、espn、facebook、facebook-cristiano、google、google-maps、google-search-restaurants、imdb、instagram、microsoft-support、reddit、sina、stackoverflow、wikipedia、youtube、youtube-watch