笔记:性能指标计算

165 阅读3分钟

对应节点时间

未命名绘图.drawio.png

unLoadEventStart

上一个文档unload抛出时的时间戳,没有上个文档则为0。

unLoadEventEnd

unload函数执行完成的时间戳,没有上个文档则为0。

navigationStart

上一个文档卸载(unload)结束的时间戳,没有上个文档则为fetchStart

redirectStart

第一个重定向请求的开始时间,如果没有重定向或者重定向不同源则为0。

redirectEnd

最后一个重定向完成时间,如果没有重定向或重定向不同源则为0。

fetchStart

浏览器准备好发起请求的时间,早于检查缓存。

domainLookupStart

DNS域名查询开始时间,如果是keep-alive或有本地缓存返回fetchStart

domainLookupEnd

DNS域名查询结束时间,如果是keep-alive或有本地缓存返回fetchStart

connectStart

TCP开始建立连接的时间,如果是keep-alive或有本地缓存返回fetchStart

secureConnectionStart

https连接开始的时间,如果是不安全连接则为0。

connectEnd

TCP握手和认证过程全部结束的时间,如果是keep-alive或有本地缓存返回fetchStart

requestStart

HTTP请求读取真实文档的开始时间,包括从本地缓存读取。

requestEnd

HTTP请求读取真实文档的结束时间,包括从本地缓存读取。

responseStart

返回浏览器从服务器收到(或从本地缓存读取)第一个字节的时间。

responseEnd

返回浏览器从服务器收到(或从本地缓存读取)最后一个字节的时间。

domLoading

当前网页dom结构开始解析的时间,document.readyState变为loading,并抛出readyStateChange事件。

domInteractive

当前网页dom结构结束解析、开始加载内嵌资源时间,document.readyState变为interactive,并抛出readyStateChange事件。

domContentLoadedEventStart

DOMContentLoaded事件发生时间,即所有需要被解析的脚本已经被解析的时间。

domContentLoadedEventEnd

所有立即执行脚本执行完毕的时间。domReady的时间

domComplete

dom树解析完成、资源准备就绪的时间,document.readyState变为complete,并抛出readyStateChange事件。

loadEventStart

load事件开始执行的时间。

loadEventEnd

load事件执行完成的时间。

性能指标

FP - first paint: 首次绘制时间

首次绘制包括任何自定义的背景绘制,第一个像素点绘制到屏幕的时间。

FCP - first contended paint: 首次内容绘制时间

浏览器完成渲染第一个内容的时间,可以是文本、图像、SVG或者其他任何元素。

FMP - first meaningful paint: 首次有意义绘制时间

页面关键元素渲染的时间,由开发者自定义

TTI - Time to interactive: 用户可交互的时间

应用已进行视觉渲染并能可靠响应用户输入的时间点。(domInteractive - fetchStart)

TTFB - Time to First Byte: 网络请求耗时

发出页面请求到接收到应答数据第一个字节所花费的毫秒数。(responseStart - requestStart)

DCL - DOMContentLoaded

所有文档脚本被解析,触发DOMContentLoaded事件的时间。(domContentLoadedEventEnd - domContentLoadedEventStart)

L - onLoad

页面所有依赖资源已完成加载时触发load事件的时间。(loadEventStart - fetchStart)

chrome core web vitals

elqsdYqQEefWJbUM2qMO.svg 视口内可见的最大内容元素的渲染时间。

eXyvkqRHQZ5iG38Axh1Z.svg 首次输入延迟,表示用户和页面进行首次交互到页面响应交互所花费的时间。

9mWVASbWDLzdBUpVcjE1.svg 累计布局偏移,网页布局在加载期间的偏移量,得分范围是 0–1,其中 0 表示没有偏移,1 表示最大偏移。