传统性能标准初始化阶段navigationStart：请求开始时间，返回0上一个文档的卸载事件redirectStart:重定向开始时间的时间戳，如果没有发生则为0redirectEnd:重定向完成时间的时间戳，如果没有发生则为0请求阶段fetchStart:表示浏览器就绪的时间使用HTTP请求获取（fetch）文档的Stamp，这个时间点将在检查任何应用程序缓存之前。domainLookupStart：是unsignedlonglong类型的毫秒数，表示开始查找域名时的UNIX时间戳。如果使用持久连接，或者信息存储在缓存或本地资源中，则此值将与PerformanceTiming.fetchStart保持一致。domainLookupEnd：unsignedlonglong类型的毫秒数，表示域名查找结束的UNIX时间戳。如果使用持久连接，或者信息存储在缓存或本地资源中，则此值将与PerformanceTiming.fetchStart保持一致。connectStart：请求连接发送到网络时的Unix毫秒时间戳。如果传输层报错，重新开始建立连接，则使用上次建立连接的开始时间作为该值。如果使用持久连接，则此值与PerformanceTiming.fetchStart相同。secureConnectionStart：安全连接握手开始时的Unix毫秒时间戳。只要你通过就没有请求连接，它返回0。connectEnd：代表网络链接建立时的时间节点。如果传输层报错或重新建立链接，则使用上次建立链接的时间。如果链接是长期存在的，那么这个值相当于PerformanceTiming.fetchStart。连接被认为是打开的，所有连接握手和SOCKS身份验证结束。requestStart：当浏览器发送请求以从服务器或缓存中获取实际文档时的Unix毫秒时间戳。如果在请求开始后传输层发生错误并重新打开连接，则此属性将设置为新请求的相应值。responseStart：浏览器收到来自服务器、缓存或本地资源的响应的第一个字节时的Unix毫秒时间戳。responseEnd:当浏览器接收到来自服务器、缓存或本地资源的响应的最后一个字节或连接关闭时的Unix毫秒时间戳当解析器完成工作时的Unix毫秒时间戳，即Document.readyState更改为'interactive'对应于触发readystatechange(en-US)事件的时间。domContentLoadedEventStart：解析器发出DOMContentLoaded事件之前的Unix时间戳（以毫秒为单位），即所有需要运行的脚本都已解析。domContentLoadedEventEnd：此时，所有需要尽快执行的脚本，无论是否按顺序执行，即DOMReadydomComplete：主文档的解析器完成工作，Document.readyState变为'complete'相当于readystatechange事件触发时的Unix毫秒时间戳。loadEventStart：当前文档触发加载事件时的Unix时间戳。如果事件未被触发，则返回0。loadEventEnd：加载事件完成时加载事件处理程序终止的Unix毫秒时间戳。如果这个事件没有被触发，或者没有完成，该值将返回0每个阶段的计算方法页面总加载时间loadEventEnd-startTimeonload事件触发DNS解析时间domainLookupEnd-domainLookupStartTCP连接耗时connectEnd-connectStartSSL连接耗时connectEnd-secureConnectionStarthttps协议只需要网络请求耗时responseStart-requestStart数据传输耗时responseEnd-responseStartDOM解析耗时domContentLoadedEventEnd-responseEnd资源加载耗时loadEventEnd-domContentLoadedEventEnd页面渲染耗时loadEventEnd-responseEnd页面完成加载时间loadEventEnd-startTimeHTMLloadingtime-responseEndstartTime是第一个交互时间domInteractive-startTime是一个以用户为中心的性能指标。传统性能指标更注重技术细节；忽略用户真正关心的指标；如果只是页面加载快，但用户体验差，那是行不通的。FP&FCPFirstPaint第一次绘制指的是从浏览器开始请求网站内容（导航阶段）到第一次绘制像素到屏幕的时间，刚好到了Painting阶段（如下图），所以FP也可以理解为白屏时间。//更推荐使用Promise包获取constobserverWithPromise=newPromise((resolve,reject)=>{newPerformanceObserver(resolve).observe({entryTypes:['paint'],});});observerWithPromise。然后(entryList=>{returnentryList.getEntries().filter(entry=>{returnentry.name==='first-paint';})[0];}).then(entry=>console.log(entry.startTime));FirstContentfulPaint，第一次内容绘制，是指浏览器渲染第一次内容的时间，内容可以是文本，img标签，SVG元素等，但不包括iframe和白底Canvas元素//更推荐使用Promise封装获取constobserverWithPromise=newPromise((resolve,reject)=>{newPerformanceObserver(resolve).observe({entryTypes:['paint'],});});observerWithPromise.then(entryList=>{returnentryList.getEntries().filter(entry=>{returnentry.name==='first-contentful-paint';})[0];}).then(entry=>console.log(entry.startTime));如果FCP时间在0-1.8秒之间，是一个比较好的指标；1.8-3.0秒之间，比较中等，有点慢；超过3秒是非常慢的FMP&SIFirst含义Paint，第一个关键内容绘制，指的是浏览器渲染第一个关键内容的时间。但“关键内容”很难有明确的定义，关键内容因应用而异。FMP通常用于测量首屏时间。但是FMP的计算过于复杂，无法通过API直接获取。即使算出来了也未必准确，所以即使Lighthouse在6.0版本之后也不再计算这个指标了，取而代之的是LCP。TTITimetoInteractive，交互时间，该指标用于衡量页面从开始加载到主要子资源渲染完成，快速可靠地响应用户输入所需的时间。简单的说，TTI就是quietwindow之前最后一个长任务（超过50ms的任务）的结束时间（如果没有找到长任务，则与FCP值相同）。如果TTI时间在0-3.8秒之间，这是一个很好的指标；3.9-7.3秒之间适中，稍慢；超过7.3秒非常慢。FIDFirstInputDelay,FirstInputDelay，测量从用户第一次与页面交互（例如当他们点击一个链接，点击一个按钮，或者使用由JavaScript驱动的自定义控件）到浏览器响应交互并且是实际上能够启动处理事件处理程序所经过的时间，FID是衡量交互性的核心指标'第一输入'],});});observerWithPromise.then(entryList=>{for(constentryofentryList.getEntries()){//eslint-disable-next-lineno-undefconstdelay=(entryasPerformanceEventTiming).processingEnd-entry.startTime;console.log（延迟）;}}）;如果FID时间在0-100毫秒之间，是一个比较好的指标；如果在100-300毫秒之间，适中，有点慢；超过300毫秒就很慢了。TBTTotalBlockingTime，总阻塞时间，是指FCP和TTI之间的总时间。这期间主线程阻塞时间过长，无法响应输入。持续时间小于50毫秒的任务阻塞时间记为0。超过50毫秒的任务阻塞时间为该任务执行时间减去50毫秒得到的时间。一个页面的总阻塞时间是每次从FCP到TTI之间的时间。长任务（大于50毫秒的任务）的阻塞时间总和。如果TBT时间在0-200毫秒之间，是一个比较好的指标；200-600毫秒之间，比较中等，有点慢；如果超过600毫秒，则非常慢。LCPLargestContentfulPaint，最大内容绘制，指视口内容的最大可见元素出现在屏幕上的时间，constobserverWithPromise=newPromise((resolve,reject)=>{newPerformanceObserver(resolve)。observe({entryTypes:['largest-contentful-paint'],});});observerWithPromise.then(entryList=>{constentries=entryList.getEntries();constlastEntry=entries[entries.length-1];console.log(lastEntry.startTime);});LCP如果时间在0-2.5之间秒，是一个比较好的指标；2.5-4秒之间比较中等，有点慢；超过4秒是很慢的简单来说，就是因为一些动态变化的DOM或者一些异步的资源加载，导致页面元素发生位移，导致用户无法找到之前的阅读位置，或者点击到意想不到的地方。letclsValue=0;letclsEntries=[];letsessionValue=0;letsessionEntries:PerformanceEntry[]=[];constobserverWithPromise=newPromise((resolve,reject)=>{newPerformanceObserver(resolve).observe({entryTypes:['layout-shift'],});});observerWithPromise.then(entryList=>{for(constentryofentryList.getEntries()){//只有不会有最最近的用户输入标志布局偏移量计数。//@ts-ignoreif(!entry.hadRecentInput){constfirstSessionEntry=sessionEntries[0];constlastSessionEntry=sessionEntries[sessionEntries.length-1];//如果条目与之前的条目分开entry如果时间小于1秒并且//从会话中的第一个条目开始小于5秒，则包括该条目//在当前会话中。否则，开始一个新会话。if(sessionValue&&entry.startTime-lastSessionEntry.startTime<1000&&entry.startTime-firstSessionEntry.startTime<5000){//@ts-ignoresessionValue+=entry.value;sessionEntries.push(入口);}else{//@ts-ignoresessionValue=entry.value;sessionEntries=[条目];}//如果当前会话值大于当前CLS值，//则更新CLS及其相关条目。如果(sessionValue>clsValue){clsValue=sessionValue;clsEntries=sessionEntries;//将更新后的值（及其条目）记录到控制台。console.log('CLS:',clsValue,clsEntries);}}}});CLS在0-0.1之间，稳定性较好；在0.1-0.25之间，适中；如果超过0.25就很不稳定了。总结参考：https://web.dev/metrics/https://juejin.cn/post/7104310605091176456#heading-2
