Performance.timing

2023-10-23  本文已影响0人  冷暖自知_zjz

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 对象包含以下属性（全部为只读）：

计算性能指标

新的代替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
上一篇下一篇

猜你喜欢

热点阅读