浏览器API Performance

Performance API ，用于收集和测量浏览器执行的性能数据。它允许开发者访问和监控关于页面加载速度、资源加载时间、用户交互响应时间和其他相关性能指标的信息。

性能条目特定于执行上下文

• 通过 Window.performance 访问窗口中运行的代码的性能信息
• 通过 WorkerGlobalScope.performance 访问 worker 中运行的代码的性能信息。

属性

• navigation（只读）
  提供了在指定的时间段里发生的操作相关信息，包括页面是加载还是刷新、发生了多少次重定向等等
• timing（只读-废弃）
  包含延迟相关的性能信息
• memory（非标准）
  Chrome 添加的一个非标准扩展，这个属性提供了一个可以获取到基本内存使用情况的对象。
  • jsHeapSizeLimit： 上下文内可用堆的最大体积，以字节计算。
  • totalJSHeapSize： 已分配的堆体积，以字节计算。
  • usedJSHeapSize： 当前 JS 堆活跃段（segment）的体积，以字节计算。
• timeOrigin （非标准只读）
  返回性能测量开始时的时间的高精度时间戳。

方法

• Performance.clearMarks(name)
  将给定的 mark 从浏览器的性能输入缓冲区中移除。

  • 参数
    • name：表示时间戳的名字，如果没有提供这个参数，则所有带有entry type这类标记的performance entries 将从 performance entry 缓存区中被移除。

• Performance.clearMeasures(name)
  将给定的 measure 从浏览器的性能输入缓冲区中移除。

  • 参数
    • name：表示时间戳的名字，。如果没有提供这个参数，则所有 entry type 标记值为"measure" 的性能实体将被移除。

• Performance.clearResourceTimings()
  从浏览器的性能数据缓冲区中移除所有 entryType 是 “resource” 的 performance entries。

• Performance.getEntries({name, entryType, initiatorType})
  基于给定的 filter 返回一个 PerformanceEntry 对象的列表。

  • 参数
    • PerformanceEntryFilterOptions（可选）：PerformanceEntryFilterOptions 是一个带有以下键值的字典：
      • “name”, performance entry. 的名字
      • “entryType”, entry 类型。合法的 entry 类型可以从 PerformanceEntry.entryType 方法获取。
      • “initiatorType”, 初始化资源的类型 (例如一个 HTML element). 其取值被
  • 返回值
    • 一个由符合 filter 条件的PerformanceEntry 对象构成的数组 . 数组成员按 PerformanceEntry.startTime时间顺序排列 . 如果没有符合 filter 条件的对象，那么返回空数组。如果不带任何参数，返回全部 entries.

• Performance.getEntriesByName(name，type )
  基于给定的 name 和 entry type 返回一个 PerformanceEntry 对象的列表。

  • 参数
    • name： 要检索的条目的名称。
    • type(可选)： 要检索的条目类型，例如“ mark”。有效的条目类型在 中列出PerformanceEntry.entryType。
  • 返回值
    • PerformanceEntry具有指定name和 的对象的列表type。如果type未指定参数，则仅name使用 来确定要返回的条目。这些项目将根据条目的时间顺序排列startTime。如果没有对象满足指定条件，则返回空列表。

• Performance.getEntriesByType(type)
  基于给定的 entry type 返回一个 PerformanceEntry 对象的列表

  • 参数
    • type: 要检索的条目类型，例如“ mark”。有效的条目类型在 中列出PerformanceEntry.entryType。entryTypes可以使用 static 属性来检索支持的内容PerformanceObserver.supportedEntryTypes。

• Performance.mark(name, markOptions)
  根据给出 name 值，在浏览器的性能输入缓冲区中创建一个相关的timestamp

  • 参数
    • name： 表示标记名称的字符串
    • markOptions ： 用于指定标记的时间戳和附加元数据的对象。
      • detail：要包含在标记中的任意元数据。默认为null.必须是结构化可克隆的。
      • startTime：用作标记时间

• Performance.measure()
  在浏览器的指定 start mark 和 end mark 间的性能输入缓冲区中创建一个指定的 timestamp

  • 语法
    measure(measureName)
    measure(measureName, startMark)
    measure(measureName, startMark, endMark)
    measure(measureName, measureOptions)
    measure(measureName, measureOptions, endMark)

  • 参数

    • measureName
    • measureOptions ：可能包含度量选项的对象。
      • detail：要包含在度量中的任意元数据。默认为null
      • start：开始时间的时间戳 ( )，或指定PerformanceMark用于开始时间的字符串。
        如果这是一个命名为 a 的字符串PerformanceMark，那么它的定义方式与 相同startMark。
      • duration：开始和结束标记时间之间的持续时间（以毫秒为单位）。如果省略，则默认为performance.now();自创建上下文以来已经过去的时间。如果提供，您还必须指定其中一个start或end但不能同时指定两者
      • end: 作结束时间的时间戳 ( )，或命名PerformanceMark用于结束时间的字符串。
        如果这是一个命名为 a 的字符串PerformanceMark，那么它的定义方式与 相同endMark。

  • startMark
    - PerformanceMark在性能时间线中命名 a 的字符串。该标记的属性PerformanceEntry.startTime将用于计算度量。

  • endMark

    • PerformanceMark在性能时间线中 命名 a 的字符串。该标记的属性PerformanceEntry.startTime将用于计算度量。如果要传递此参数，则还必须传递startMark一个空measureOptions对象。

• Performance.now()
  返回一个表示从性能测量时刻开始经过的毫秒数 DOMHighResTimeStamp

• Performance.setResourceTimingBufferSize(maxSize)
  将浏览器的资源 timing 缓冲区的大小设置为 “resource” type performance entry 对象的指定数量

  • 参数
    • maxSize： 表示浏览器应在其性能条目缓冲区中保存的number最大对象数

• Performance.toJSON()
  其是一个 JSON 格式转化器，返回 Performance 对象的 JSON 对象

事件

• onresourcetimingbufferfull
  onresourcetimingbufferfull 属性是一个在 resourcetimingbufferfull 事件触发时会被调用的 event handler。这个事件当浏览器的资源时间性能缓冲区已满时会触发。
  • 返回值：一个当 resourcetimingbufferfull 事件触发时调用的事件处理器。

使用 Performance API，开发者可以更好地了解页面的性能情况，找到页面加载或资源加载的瓶颈，并进行优化改进。它对于测量和优化网站的性能非常有用，并且可以提供更好的用户体验。