web 性能监控 sdk 理论知识整理

·  阅读 252
web 性能监控 sdk 理论知识整理

核心概念简介

image.png

FP(First Paint)

首次绘制:用于记录页面第一次绘制像素的时间。比如:页面背景颜色是黑色,那么当黑色的第一个像素落在显示器时就记录了FP指标

FCP(First Contentfull Paint)

首次有内容的绘制:用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间,对于spa来说可以理解为:

里面开始有内容

FMP(First Meaningful Paint)

首次有意义的绘制:基本被废弃了,因为“有意义”没有一个严格的标准,有意义的绘制对不同页面来说是不同的,可以考虑 LCP 指标

LCP(Largest Contentful Paint)

最大内容绘制:⽤于记录视窗内最⼤的元素绘制的时间,该时间会随着⻚⾯渲染变化⽽变化,因为⻚⾯中的最⼤元素在渲染过程中可能会发⽣改变,另外该指标会在⽤户第⼀次交互后停⽌记录。LCP 主要是感知加载速度

LCP 代表了⻚⾯的速度指标, LCP 能体现的东⻄更多⼀些。⼀是指标实时更新,数据更精确,⼆是代表着⻚⾯最⼤元素的渲染时间,最⼤元素的快速载⼊能让⽤户感觉性能还挺好。

TTI(Time to Interactive)

可交互时间:

先进行First Contentful Paint 首次内容绘制 (FCP)
时间轴正向搜索时长至少为 5 秒的安静窗口,其中,安静窗口的定义为:没有长任务且不超过两个正在处理的网络 GET 请求。
沿时间轴反向搜索安静窗口之前的最后一个长任务,如果没有找到长任务,则在 FCP 步骤停止执行。
TTI 是安静窗口之前最后一个长任务的结束时间(如果没有找到长任务,则与 FCP 值相同)。

Long tasks(长任务)

超过了 50ms 的任务

FID(First Input Delay)

首次输入延迟:用户对您的网站加载速度的第一印象可以通过First Contentful Paint 首次内容绘制 (FCP)进行测量。但是,您的网站在屏幕上绘制像素的速度只是其中一部分,同样重要的还有当用户试图与这些像素进行交互时,您的网站响应度有多高!

首次输入延迟 (FID) 指标有助于衡量您的用户对网站交互性和响应度的第一印象。
FID 测量从用户第一次与页面交互(例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件)直到浏览器对交互作出响应,并实际能够开始处理事件处理程序所经过的时间。
FID 代表⻚⾯的交互体验指标,交互响应的快会让⽤户觉得⽹⻚流畅。

CLS(Cumulative Layout Shift)

累计布局偏移:累积布局偏移 (CLS) 是测量视觉稳定性的一个以用户为中心的重要指标,因为该项指标有助于量化用户经历意外布局偏移的频率,较低的 CLS 有助于确保一个页面是令人愉悦的。
CLS 代表了⻚⾯的稳定指标,尤其在⼿机上这个指标更为重要。因为⼿机屏幕挺⼩,CLS 值⼀⼤的话会让⽤户觉得⻚⾯体验做的很差。

TBT(Total Blocking Time)

总阻塞时间:一个页面的总阻塞时间是在 FCP 和 TTI 之间发生的每个长任务的阻塞时间总和

image.png

PerformanceTiming

统计方式:let n = window.performance.getEntriesByType('navigation')[0]
单位 ms

image.png

  • navigationStart:在同一个浏览器上下文中,前一个网页(与当前页面不一定同域)unload 的时间戳,如果无前一个网页 unload ,则与 fetchStart 值相等
  • fetchStart: 浏览器准备好使用 HTTP 请求抓取文档的时间,这发生在检查本地缓存之前
  • domainLookupStart:DNS 域名查询开始的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等
  • domainLookupEnd:DNS 域名查询完成的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等
  • connectStart:HTTP(TCP) 开始建立连接的时间,如果是持久连接,则与 fetchStart 值相等,如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接开始的时间
  • secureConnectionStart:HTTPS 连接开始的时间,如果不是安全连接,则值为 0
  • connectEnd:HTTP(TCP) 完成建立连接的时间(完成握手),如果是持久连接,则与 fetchStart 值相等,如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接完成的时间
  • requestStart:HTTP 请求读取真实文档开始的时间(完成建立连接),包括从本地读取缓存,连接错误重连时,这里显示的也是新建立连接的时间
  • responseStart:HTTP 开始接收响应的时间(获取到第一个字节),包括从本地读取缓存
  • responseEnd:HTTP 响应全部接收完成的时间(获取到最后一个字节),包括从本地读取缓存
  • domInteractive:完成解析 DOM 树的时间,document.readyState 变为 interactive,并将抛出 readystatechange 相关事件
  • domContentLoadedEventStart:DOM 解析完成后,网页内资源加载开始的时间,文档发生 DOMContentLoaded事件的时间
  • domContentLoadedEventEnd:DOM 解析完成后,网页内资源加载完成的时间(如 JS 脚本加载执行完毕),文档的DOMContentLoaded 事件的结束时间
  • domComplete:DOM 树解析完成,且资源也准备就绪的时间,document.readyState 变为 complete,并将抛出 readystatechange 相关事件
  • loadEventStart:load 事件发送给文档,也即 load 回调函数开始执行的时间
  • loadEventEnd:load 事件的回调函数执行完毕的时间
常用网络指标计算方式:
dnsLookupTime(DNS查询耗时)n.domainLookupEnd - n.domainLookupStart
tcpTime(TCP建立耗时)n.connectEnd - n.connectStart
fetchTime(准备发起请求到响应结束耗时)n.responseEnd - n.fetchStart
parseDomTime (页面解析dom耗时)n.domComplete - n.domInteractive
whiteTime(白屏时间)n.responseStart - n.navigationStart
domreadyTime(时间(用户可操作时间节点) 完成dom渲染时间)n.domContentLoadedEventEnd - n.navigationStart
loadTime(页面onload时间)n.loadEventEnd - n.navigationStart
headerSize(Http header size)n.transferSize - n.encodedBodySize
ttfb(Time to First Byte )n.responseStart - n.requestStart
downloadTime(Response time only (download))n.responseEnd - n.responseStart
totalTime(Request plus response time (network only))n.responseEnd - n.requestStart
网络流量速度相关
有效带宽的估计值 downlink (MB/s) - Experimentalwindow.navigator.connection.downlink
网络类型 effectiveType - Experimental'slow-2g', '2g', '3g', or '4g'window.navigator.connection.effectiveType
有效的往返时间估计 rtt (ms) - Experimentalwindow.navigator.connection.rtt
saveData saveData - Experimentaltrue or falsewindow.navigator.connection.saveData
离线缓存

window.navigator.storage.estimate().then((storageEstimate) => {console.log(storageEstimate)})
StorageEstimate - Web API 接口参考 | MDN
提供对你的域名或Web app的数据存储空间总量和已用量的估计值

quota (byte)预留的存储空间总大小,且该大小为估计值how much space is available (quota)
usage (byte)已经使用的存储空间大小how much storage the app takes up (usage)
usageDetails.indexedDB (byte)indexedDB 已使用的大小

核心指标衡量标准

为了对页面或网站的整体性能进行分类,我们取该页面或网站的所有页面浏览量的第 75 个百分位数。换句话说,如果一个网站有至少 75% 的页面浏览量达到"良好"阈值,则该网站在这项指标下就会被归类为性能"良好"。相反,如果有至少 25% 的页面浏览量达到"欠佳"阈值,则该网站会被归类为性能"欠佳"。

image.png

image.png

性能监控sdk

基于以上理论开发了 性能监控sdk-mmpf

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改