Performance.timing
已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。
window.performance.timing API 早期是 HTML5 所提出的一项标准，目前已经成为 Web 前端开发的常见性能统计手段之一，该 API 的兼容性非常好，几乎所有现代浏览器都支持该 API。
典型的现代浏览器如 Chrome、Firefox、Safari 和 Edge 等均支持 performance.timing API，其兼容性覆盖了大部分的用户。但是，IE 浏览器的支持相对较差，部分版本的 IE 浏览器不支持 performance.timing API，或者会出现兼容性问题。
为了兼容所有浏览器，应该在代码中做出相应的判断，针对支持和不支持 performance.timing API 的两种情况分别编写代码。另外，建议在代码中添加兼容性提示，以增加代码的易读性和维护性。
可以使用浏览器自带的 Performance API 来统计 Vue 页面加载耗时。具体步骤如下：
-
在 Vue 页面的
mounted生命周期钩子函数内执行以下代码：
let timing = window.performance.timing;
let loadTime = timing.loadEventEnd - timing.navigationStart;
console.log('页面加载耗时：' + loadTime + 'ms');
-
在浏览器的开发者工具中，选择 Performance 标签，在左侧菜单中选择「性能分析」或「时间轴」，即可查看页面加载耗时的统计信息。
注意：上述方法只能在支持 Performance API 的现代浏览器中使用，对于不支持 Performance API 的旧版浏览器，可以考虑使用其他统计方法或工具。
window.onload = function() {
var timing = performance.timing;
console.log('准备新页面时间耗时: ' + timing.fetchStart - timing.navigationStart);
console.log('redirect 重定向耗时: ' + timing.redirectEnd - timing.redirectStart);
console.log('Appcache 耗时: ' + timing.domainLookupStart - timing.fetchStart);
console.log('unload 前文档耗时: ' + timing.unloadEventEnd - timing.unloadEventStart);
console.log('DNS 查询耗时: ' + timing.domainLookupEnd - timing.domainLookupStart);
console.log('TCP连接耗时: ' + timing.connectEnd - timing.connectStart);
console.log('request请求耗时: ' + timing.responseEnd - timing.requestStart);
console.log('白屏时间: ' + timing.responseStart - timing.navigationStart);
console.log('请求完毕至DOM加载: ' + timing.domInteractive - timing.responseEnd);
console.log('解释dom树耗时: ' + timing.domComplete - timing.domInteractive);
console.log('从开始至load总耗时: ' + timing.loadEventEnd - timing.navigationStart);
}
performance.timing 对象包含以下属性（全部为只读）：
-
•
navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。
-
•
unloadEventStart：如果前一个网页与当前网页属于同一个域名，则返回前一个网页的unload事件发生时的Unix毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为0。
-
•
unloadEventEnd：如果前一个网页与当前网页属于同一个域名，则返回前一个网页unload事件的回调函数结束时的Unix毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为0。
-
•
redirectStart：返回第一个HTTP跳转开始时的Unix毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0。
-
•
redirectEnd：返回最后一个HTTP跳转结束时（即跳转回应的最后一个字节接受完成时）的Unix毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0。
-
•
fetchStart：返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件在网页查询本地缓存之前发生。
-
•
domainLookupStart：返回域名查询开始时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值。
-
•
domainLookupEnd：返回域名查询结束时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值。
-
•
connectStart：返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接（persistent connection），则返回值等同于fetchStart属性的值。
-
•
connectEnd：返回浏览器与服务器之间的连接建立时的Unix毫秒时间戳。如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。
-
•
secureConnectionStart：返回浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接，则返回0。
-
•
requestStart：返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的Unix毫秒时间戳。
-
•
responseStart：返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的Unix毫秒时间戳。
-
•
responseEnd：返回浏览器从服务器收到（或从本地缓存读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的Unix毫秒时间戳。
-
•
domLoading：返回当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的readystatechange事件触发时）的Unix毫秒时间戳。
-
•
domInteractive：返回当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的Unix毫秒时间戳。
-
•
domContentLoadedEventStart：返回当前网页DOMContentLoaded事件发生时（即DOM结构解析完毕、所有脚本开始运行时）的Unix毫秒时间戳。
-
•
domContentLoadedEventEnd：返回当前网页所有需要执行的脚本执行完成时的Unix毫秒时间戳。
-
•
domComplete：返回当前网页DOM结构生成时（即Document.readyState属性变为“complete”，以及相应的readystatechange事件发生时）的Unix毫秒时间戳。
-
•
loadEventStart：返回当前网页load事件的回调函数开始时的Unix毫秒时间戳。如果该事件还没有发生，返回0。
-
•
loadEventEnd：返回当前网页load事件的回调函数运行结束时的Unix毫秒时间戳。如果该事件还没有发生，返回0。
计算性能指标
-
•
DNS查询耗时 = domainLookupEnd - domainLookupStart
-
•
TCP链接耗时 = connectEnd - connectStart
-
•
request请求耗时 = responseEnd - responseStart
-
•
解析dom树耗时 = domComplete - domInteractive
-
•
domready时间 = domContentLoadedEventEnd - fetchStart
-
•
首屏渲染时间、首次有内容渲染时间 performance.getEntriesByType('paint') https://w3c.github.io/paint-timing/
-
•
onload时间 = loadEventEnd - fetchStart
新的代替api
现在推荐使用新的 window.performance.getEntries() API 来代替。
使用方法如下：
-
在 Vue 页面的
mounted生命周期钩子函数内执行以下代码：
let entries = performance.getEntriesByType('navigation');
let loadTime = entries[0].loadEventEnd - entries[0].navigationStart;
console.log('页面加载耗时：' + loadTime + 'ms');
其中，getEntriesByType('navigation') 方法返回所有“navigation”类型资源（例如页面或location.replace()）的性能记录，而不是所有资源的记录。因此可以从中得到页面加载的统计信息。
-
在浏览器的开发者工具中，选择 Performance 标签，在左侧菜单中选择「性能分析」或「时间轴」，即可查看页面加载耗时的统计信息。
需要注意的是，window.performance.getEntries() 仅在支持 Performance API 的现代浏览器中可用，并且返回的记录可能因浏览器而异。
为了保证代码的兼容性，应该检测浏览器是否支持 window.performance.getEntries() API，并做出相应的处理。
可以使用以下代码来检测该 API 的存在：
if (window.performance && typeof window.performance.getEntries === 'function') {
// 支持 window.performance.getEntries() API
} else {
// 不支持 window.performance.getEntries() API，需使用其他方法
}
上述代码中，首先检查 window.performance 是否存在，然后判断 window.performance.getEntries 是否为一个函数。如果支持该 API，则执行相关代码；否则，可以使用 window.performance.timing 等其他方法来统计页面加载时间。
使用该方法可以确保代码在不同浏览器中具有更好的兼容性。
timing: PerformanceTiming
// 在同一个浏览器上下文中，前一个网页（与当前页面不一定同域）unload 的时间戳，如果无前一个网页 unload ，则与 fetchStart 值相等
connectEnd: 1649942785899 // HTTP（TCP） 完成建立连接的时间（完成握手），如果是持久连接，则与 fetchStart 值相等，注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接完成的时间，这里握手结束，包括安全连接建立完成、SOCKS 授权通过
connectStart: 1649942785899 // HTTP（TCP） 开始建立连接的时间，如果是持久连接，则与 fetchStart 值相等，注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接开始的时间
domComplete: 1649942786530 // DOM 树解析完成，且资源也准备就绪的时间，Document.readyState 变为 complete，并将抛出 readystatechange 相关事件
domContentLoadedEventEnd: 1649942786450 // DOM 解析完成后，网页内资源加载开始的时间，在 DOMContentLoaded 事件抛出前发生
domContentLoadedEventStart: 1649942786450 // DOM 解析完成后，网页内资源加载完成的时间（如 JS 脚本加载执行完毕）
domInteractive: 1649942786450 // 注意只是 DOM 树解析完成，这时候并没有开始加载网页内的资源
domLoading: 1649942786080 // 开始解析渲染 DOM 树的时间，此时 Document.readyState 变为 loading，并将抛出 readystatechange 相关事件
domainLookupEnd: 1649942785899 // DNS 域名查询完成的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
domainLookupStart: 1649942785899 // DNS 域名查询开始的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
fetchStart: 1649942785899 // 浏览器准备好使用 HTTP 请求抓取文档的时间，这发生在检查本地缓存之前
loadEventEnd: 1649942786531 // load 事件的回调函数执行完毕的时间
loadEventStart: 1649942786530 // load 事件发送给文档，也即 load 回调函数开始执行的时间，注意如果没有绑定 load 事件，值为 0
navigationStart: 1649942785896
redirectEnd: 0 // 最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内部的重定向才算，否则值为 0
redirectStart: 0 // 第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算，否则值为 0
requestStart: 1649942785903 // HTTP 请求读取真实文档开始的时间（完成建立连接），包括从本地读取缓存，连接错误重连时，这里显示的也是新建立连接的时间
responseEnd: 1649942786434 // HTTP 响应全部接收完成的时间（获取到最后一个字节），包括从本地读取缓存
responseStart: 1649942786060 // HTTP 开始接收响应的时间（获取到第一个字节），包括从本地读取缓存
secureConnectionStart: 0 // HTTPS 连接开始的时间，如果不是安全连接，则值为 0
unloadEventEnd: 1649942786077 // 和 unloadEventStart 相对应，返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳
unloadEventStart: 1649942786077 // 前一个网页（与当前页面同域）unload 的时间戳，如果无前一个网页 unload 或者前一个网页与当前页面不同域，则值为 0
下图显示了 PerformanceNavigationTiming 中定义的所有时间戳属性。
timestamp-diagram.jpg
网友评论