网页打开速度常见性能标准

原始方案

在readystatechange生命周期内拿到浏览器的window.performance.timing对象，用timing.domInteractive作为结束加载时间，用timing.fetchStart作为开始加载时间 异常处理：如果拿到的timing.domInteractive为0，则用当前时间戳作为结束时间； 加载失败处理：如果window.location.href得到的对象是chrome-error://chromewebdata/，则说明加载失败了，需要按照超时进行处理

新方案

查阅mdn，发现window.performance.timing已废弃，后期可能会出现兼容上的问题，所以需要更新为新属性PerformanceNavigationTiming，可通过performance.getEntriesByType(“navigation”)[0]进行获取，文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceNavigationTiming

PerformanceNavigationTiming获得的时间的一个加载周期

各项指标

序号指标解释1navigationStart表示从上一个文档卸载结束时的unix时间戳，如果没有上一个文 档，这个值将和fetchStart相等。2unloadEventStart表示前一个网页（与当前页面同域）unload的时间戳，如果无前 一个网页unload或者前一个网页与当前页面不同域，则值为0。3unloadEventEnd返回前一个页面unload时间绑定的回掉函数执行完毕的时间戳。4redirectStart第一个HTTP重定向发生时的时间。有跳转且是同域名内的重定向才算，否则值为0。5redirectEnd最后一个HTTP重定向完成时的时间。有跳转且是同域名内部的重定向才算，否则值为0。6fetchStart浏览器准备好使用HTTP请求抓取文档的时间，这发生在检查本地缓存之前。7domainLookupStart domainLookupEndDNS域名查询开始/结束的时间，如果使用了本地缓存（即无DNS查询)或持久连接，则与fetchStart值相等。8connectStartHTTP(TCP)开始/重新建立连接的时间，如果是持久连接，则与fetchStart值相等9connectEndHTTP(TCP)完成建立连接的时间（完成握手），如果是持久接，则与fetchStart值相等。10secureConnectionStartHTTPS连接开始的时间，如果不是安全连接，则值为0。11requestStartHTTP请求读取真实文档开始的时间（完成建立连接），包括从本地读取缓存。12responseStartHTTP开始接收响应的时间（获取到第一个字节），包括从本地读取缓存。13responseEndHTTP响应全部接收完成的时间（获取到最后一个字节），包括本地读取缓存。14domLoading开始解析渲染DOM树的时间，此时Document…readyState变为loading,并将抛出readystatechange相关事件。15domlnteractive完成解析DOM树的时间，Document…readyState变为interactive,并将抛出readystatechange相关事件，注意只是DOM树解析完成，这时候并没有开始加载网页内的资源。16domContentLoadedEventStartDOM解析完成后，网页内资源加载开始的时间，在DOMContentLoaded事件抛出前发生。17domContentLoadedEventEndDOM解析完成后，网页内资源加载完成的时间（如JS脚本加载执行完毕)18domCompleteDOM树解析完成，且资源也准备就绪的时间，Document…readyState变为complete,并将抛出readystatechange相关事件。19loadEventStartload事件发送给文档，也即load回调函数开始执行的时间。20loadEventEndload事件的回调函数执行完毕的时间。

三种方案：（采取第二个方案dcl）

1.当服务器传输资源完毕之后，但页面是空边的，可以视为网页打开。可用responseEnd-startTime这个数值。

2.当初始的 HTML 文档被完全加载和解析完成之后，网页内资源加载完成的时间(如JS脚本加载执行完毕)，可以视为网页打开。可直接取domContentLoadedEventEnd-startTime这个数值 （ DCL 测量浏览器准备好执行任何客户端脚本的时间点。用更专业的术语来说，DCL 是在网页加载过程中，浏览器已组装 DOM（文档对象模型）且没有样式表阻止执行 JavaScript 的时间。）

3.当图片资源以及js资源和样式表等全部加载完成，页面图片样式显示完毕，可以视为网页打开。可取loadEventEnd-startTime这个数值

加载失败处理：如果window.location.href得到的对象是chrome-error://chromewebdata/，则说明加载失败了，需要按照超时进行处理

指标计算方式：

https://blog.csdn.net/Zong_0915/article/details/131957963

上传字段指标计算方式说明dcl时能否获取到DNS解析耗时domainLookupEnd - domainLookupStart指通过域名解析服务（DNS），将指定的域名解析成IP地址所消耗的时间能TCP连接耗时connectEnd - connectStart指浏览器和WEB服务器建立TCP/IP连接所用的时间能SSL连接耗时location.protocol === ‘https:’ ? connectEnd - secureConnectionStart只在 HTTPS 下有效，属于TCP连接耗时的一部分，指安全连接握手耗时能TTFB网路请求耗时(请求响应耗时)responseStart - requestStart指开始发送请求到服务器返回第一个字节所需要的时间能Trans数据传输耗时responseEnd-responseStart指服务器端返回第一个字节到最后一个字节所需要的时间能DOM解析耗时domContentLoadedEventEnd - responseEnd指页面请求完成（responseEnd）后，到整个 DOM 解析完所用的时间，页面的复杂度决定了 DOM 解析耗时能资源加载耗时loadEventEnd - domContentLoadedEventEnd指 DOM 解析完成后到页面完全加载完所用的时间否首包时间responseStart - startTime指从页面请求到浏览器开始接收到数据所用的时间能页面渲染耗时loadEventEnd - responseEnd等于页面完全加载时间 - HTML 加载完成时间（见下面指标）否页面完全加载时间loadEventEnd - startTime指页面完全加载完所用的时间，这时候触发完成了 onload 事件否白屏时间performance.getEntries(‘paint’).filter(entry => entry.name == ‘first-paint’)[0].startTime首次渲染时间，指页面出现第一个文字或图像所花费的时间能HTML加载完时间responseEnd - startTime指页面所有 HTML 加载完成（不包括页面渲染时间），即包括 DNS、TCP、Request 和 Response能首次可交互时间（TTI）domInteractive – fetchStart指页面 首次可交互时间能首屏时间使用LCP来计算首屏最大元素出现的时间代表首屏加载的时间（这个有概念需要自定义计算方式）首屏时间，也称用户完全可交互时间，即整个页面首屏完全渲染出来，用户完全可以交互，一般首屏时间小于页面完全加载时间，该指标可能拿到部分，取最大值

LCP的计算方式：

new PerformanceObserver((entryList) => {

var maxSize = 0;

var renderTime = 0;

for (var entry of entryList.getEntries()) {

// 渲染的内容看最大值

if(entry.size > maxSize){

maxSize = entry.size;

renderTime = entry.startTime;

}

}

console.log('LCP', renderTime)

}).observe({type: 'largest-contentful-paint', buffered: true});

备注： 这个需要限定webview区域的大小才能生效，获取的是当前区域大小作为首屏进行加载的时间,必须给webview设置真实高度透明度可以为0，这个值可能有多个取最大值。

三.获取静态资源(暂不获取)

通过w3c新增加的api，performance.getEntriesByType(“resource”)，可以获取资源的加载时间，，可在onload周期的时候取每种类型加载的时间，返回的字段较多，我们可只取这几个存储即可

name: item.name,

// 资源加载耗时

duration: item.duration.toFixed(2),

// 资源大小

transferSize: item.transferSize,

// 资源所用协议

nextHopProtocol: item.nextHopProtocol,

// 资源类型(sciprt,link,img,css,fetch,other,xmlhttprequest)

initiatorType:item.initiatorType

相关js代码

getResources() {

if (!window.performance) return

const data = window.performance.getEntriesByType('resource')

const resource = {

xmlhttprequest: [],

css: [],

other: [],

script: [],

img: [],

link: [],

fetch: [],

// 获取资源信息时当前时间

time: new Date().getTime(),

}

data.forEach(item => {

let resourceArray = resource[item.initiatorType]

if (resourceArray) {

resourceArray.push({

// 资源的名称

name: item.name,

// 资源加载耗时

duration: +item.duration.toFixed(2),

// 资源大小

transferSize: item.transferSize,

// 资源所用协议

nextHopProtocol: item.nextHopProtocol,

initiatorType: item.initiatorType

})

resourceArray = resourceArray.sort((a, b) => a.duration - b.duration)

}

})

return resource

}

参考文章和相关指标

https://blog.csdn.net/gaojinbo0531/article/details/129243835

https://keenwon.com/web-vitals/#11-%E4%BC%A0%E7%BB%9F%E6%80%A7%E8%83%BD%E6%8C%87%E6%A0%87

https://github.com/sisterAn/blog/issues/112

文档加载过程：

TTFB：Time to First Byte，是发出页面请求到接收到应答数据第一个字节所花费的毫秒数，这个时间段内包括 DNS 查找、TCP 连接和 SSL 连接 TTFB 不仅仅是在服务器上花费的时间，还包括设备请求发送到服务器，再从服务器返回到设备的时间，它计算的是整个延迟的往返时间。 DCL：空白到出现内容所花费的时间 DOMContentLoaded 就是，当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载 L：onLoad 事件触发所需时间 仅在页面所有资源都加载完毕后（比如图片，CSS），onLoad 事件才被触发 渲染呈现过程：

FP&FCP：首次绘制（FP，可能是背景色或loading），首次内容绘制时间（FCP）白屏时间 FCP (First Contentful Paint) 首次内容绘制，浏览器首次绘制来自DOM的内容的时间，内容必须包括文本，图片，非白色的canvas或svg，也包括带有正在加载中的web字体文本。这是用户第一次看到的内容。

FCP时间(秒)颜色编码FPC分数0 - 2绿色(快)75 - 1002 - 4橙色(中等)50 - 74超过4红色(慢)0 - 49 FMP：首要内容出现在屏幕上的时间 LCP：从页面加载开始，到页面上最大的文本块或者图片元素渲染在屏幕上的时间 LCP (Largest Contentful Paint) 最大内容绘制，可视区域中最大的内容元素呈现到屏幕上的时间，用以估算页面的主要内容对用户的可见时间。img图片，video元素的封面，通过url加载到的北京，文本节点等，为了提供更好的用户体验，网站应该在2.5s以内或者更短的时间最大内容绘制。

LCP时间(秒)颜色编码0 - 2.5绿色(快)2.5 - 4橙色(中等)超过4红色(慢) SI：页面加载过程中内容可视化显示的速度

FSP：从开始加载到首屏内容全部绘制完成的时间 （首屏时间） cls: 从页面开始加载，到页面生命周期变为隐藏之间的所有意外的布局变化的累计分数 CLS (Cumulative Layout Shift) 累计布局位移，CLS会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和，他是一种保证页面的视觉稳定性从而提升用户体验的指标方案。

用人话来说就是当点击页面中的某个元素的时候，突然布局变了，手指点到了其它位置。比如想点击页面的链接，突然出现了一个banner。这种情况可能是因为尺寸未知的图像或者视频。

CLS时间(毫秒)颜色编码0 - 0.1绿色(快)0.1 - 0.25橙色(中等)超过0.25红色(慢) 交互过程：

TTI：从页面开始加载，到内容呈现，初始js加载完成，再到可以立刻响应用户交互的时间。 （可持续交互时间） TTI (Time to Interactive) 网页第一次完全达到可交互状态的时间点，浏览器已经可以持续的响应用户的输入，完全达到可交互的状态的时间是在最后一个长任务完成的时间，并且在随后的5s内网络和主线程是空闲的。从定义上来看，中文名称叫持续可交互时间或可流畅交互时间更合适。

TTI时间(秒)颜色编码0 - 3.8绿色(快)3.9 - 7.3橙色(中等)超过7.3红色(慢) TBT: 在FCP和TTI之间的时间，即页面可见到可交互的时间，代表了主线程被阻塞无法响应用户交互 TBT (Total Block Time) 总阻塞时间，度量了FCP和TTI之间的总时间，在该时间范围内，主线程被阻塞足够长的时间以防止输入响应。只要存在长任务，该主线程就会被视为阻塞，该任务在主线程上运行超过50毫秒。

线程阻塞是因为浏览器无法中断正在进行的任务，因此如果用户确实在较长的任务中间与页面进行交互，则浏览器必须等待任务完成才能响应。

TBT时间(毫秒)颜色编码0 - 300绿色(快)300 - 600橙色(中等)超过600红色(慢) FCI：页面首可交互时间 （可交互时间） FID：用户第一个交互行为，比如点击链接、点击按钮等，到浏览器实际响应这次交互的时间。 FID (First Input Delay) 首次输入延迟，从用户第一次与页面进行交互到浏览器实际能够响应该交互的时间，输入延迟是因为浏览器的主线程正忙于做其他事情，所以不能响应用户，发生这种情况的一个常见原因是浏览器正忙于解析和执行应用程序加载的大量计算的JavaScript。

FID时间(毫秒)颜色编码0 - 100绿色(快)100 - 300橙色(中等)超过300红色(慢) FPS：每秒可以重新绘制的帧数，用于衡量应用流畅度

其中最重要的是白屏时间（FP&FCP）、首屏时间（FSP）、可交互时间（FCI）、可持续交互时间（TTI）

谷歌标准

加载性能LCP，交互性FID，视觉稳定性CLS