这是我参与「第四届青训营」笔记创作活动的第4天

Performance 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、User Timing API 和 Resource Timing API。

该类型的对象可以通过调用只读属性 Window.performance来获得。

属性

Performance.navigation

只读属性 Performance.navigation 会返回一个 PerformanceNavigation 对象。这个对象表示出现在当前浏览上下文的 navigation 类型，比如获取某个资源所需要的重定向次数。

PerformanceNavigation.type 只读

一个无符号短整型，表示是如何导航到这个页面的。可能的值如下：
- TYPE_NAVIGATE (0) 当前页面是通过点击链接，书签和表单提交，或者脚本操作，或者在 url 中直接输入地址，type 值为 0
- TYPE_RELOAD (1) 点击刷新页面按钮或者通过Location.reload()方法显示的页面，type 值为 1
- TYPE_BACK_FORWARD (2) 页面通过历史记录和前进后退访问时。type 值为 2
- TYPE_RESERVED (255) 任何其他方式，type 值为 255

PerformanceNavigation.redirectCount 只读

无符号短整型，表示在到达这个页面之前重定向了多少次。

Performance.timing

PerformanceTiming 接口是为保持向后兼容性而保留的传统接口，并且提供了在加载和使用当前页面期间发生的各种事件的性能计时信息。

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 PerformanceNavigationTiming 接口代替。

Resource Timing API 提供了获取和分析应用程序资源加载的详细网络计时数据的一种途径。

应用可以使用一些可量化的时间度量标准，如加载特定资源的时长。

这些资源可能是 XMLHttpRequest, SVG、图片、脚本等等。

function calculateLoadTimes() {
  // 判断是否支持 performance
  if (performance === undefined) {
    console.log('= Calculate Load Times: performance NOT supported')
    return
  }

  // 获取 "resource" 类型 performance entries 列表
  var resources = performance.getEntriesByType('resource')
  if (resources === undefined || resources.length <= 0) {
    console.log('= Calculate Load Times: there are NO `resource` performance records')
    return
  }

  console.log('= Calculate Load Times')
  for (var i = 0; i < resources.length; i++) {
    console.log('== Resource[' + i + '] - ' + resources[i].name)
    // 重定向时间
    var t = resources[i].redirectEnd - resources[i].redirectStart
    console.log('... Redirect time = ' + t)

    // DNS 时间
    t = resources[i].domainLookupEnd - resources[i].domainLookupStart
    console.log('... DNS lookup time = ' + t)

    // TCP 握手时间
    t = resources[i].connectEnd - resources[i].connectStart
    console.log('... TCP time = ' + t)

    // 可靠连接时间
    t =
      resources[i].secureConnectionStart > 0
        ? resources[i].connectEnd - resources[i].secureConnectionStart
        : '0'
    console.log('... Secure connection time = ' + t)

    // 响应时间
    t = resources[i].responseEnd - resources[i].responseStart
    console.log('... Response time = ' + t)

    // fetchStart 直到响应结束
    t = resources[i].fetchStart > 0 ? resources[i].responseEnd - resources[i].fetchStart : '0'
    console.log('... Fetch until response end time = ' + t)

    // 请求开始到响应结束
    t = resources[i].requestStart > 0 ? resources[i].responseEnd - resources[i].requestStart : '0'
    console.log('... Request start until response end time = ' + t)

    // Start 直到响应结束
    t = resources[i].startTime > 0 ? resources[i].responseEnd - resources[i].startTime : '0'
    console.log('... Start until response end time = ' + t)
  }
}

常用方法

Performance.getEntries()

getEntries()对于给定的 filter，此方法返回 PerformanceEntry对象数组。

其中数组对象的第一个是PerformanceNavigationTiming，提供了在加载和使用当前页面期间发生的各种事件的性能计时信息。剩余的均为PerformanceResourceTiming。

Performance.getEntriesByName()

getEntriesByName()方法返回一个给定名称和 name 和 type 属性的PerformanceEntry对象数组。在创建 performance 标记或在明确的时间点测量（比如手动调用mark()方法）也可以创建这样的对象数组。

Performance.now()

performance.now()方法返回一个精确到毫秒的时间戳。

WEB性能API | 青训营笔记

属性