前端程序员-Cloud

# Performance API

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

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

# 1、PerformanceEntry

PerformanceEntry 对象代表了 performance 时间列表中的单个 metric(指标) 数据. 每一个 performance entry 都可以在应用运行过程中通过手动构建 mark (en-US) 或者 measure (en-US) (例如调用 mark() (opens new window) 方法) 生成. 此外, Performance entries 在资源加载的时候，也会被动生成（例如图片、script、css等资源加载）

属性：

  1. PerformanceEntry.name performance entry 的名字
  2. PerformanceEntry.entryType 代表所上报的 performance metric 的 entryType 类型，例如 "mark".
  3. PerformanceEntry.startTime此为 metric 上报时的时间
  4. PerformanceEntry.duration 该事件的耗时

方法：

  1. PerformanceEntry.toJSON()

# 2、PerformanceNavigationTiming

理解为 PerformanceEntry 的子类， 这个主要是和整个文档相关的

PerformanceNavigationTiming 提供了用于存储和检索有关浏览器文档事件的指标的方法和属性。 例如，此接口可用于确定加载或卸载文档需要多少时间。

该接口扩展了 PerformanceEntry (opens new window) 属性，修订和约束以下性能条目：

PerformanceEntry.entryType 返回 "navigation"

PerformanceEntry.name (opens new window) 只读返回 文档地址 (opens new window).

该接口还扩展 PerformanceResourceTiming (opens new window) 属性，修订和约束以下性能条目：

下面可能是几个特有的属性， 可能理解有错误

PerformanceNavigationTiming.domContentLoadedEventStart 等于用户代理在当前文档上触发 DOMContentLoaded事件之前的时间。

PerformanceNavigationTiming.domContentLoadedEventEnd 等于用户代理在当前文档上触发DOMContentLoaded事件完成之后的时间。

PerformanceNavigationTiming.domInteractive等于用户代理将当前文档的当前文档准备就绪设置为交互 (opens new window)之前的时间。

PerformanceNavigationTiming.loadEventEnd只读 代表当前文档的加载事件完成的时间。

PerformanceNavigationTiming.loadEventStart 等于立即触发当前文档的加载事件之前的时间。

# 3、PerformanceResourceTiming

理解为 PerformanceEntry 的子类，加载 image或script 等会生成

PerformanceResourceTiming接口可以***检索和分析有关加载应用程序资源的详细网络计时数据***。 应用程序可以使用timing指标来确定获取特定资源所需的时间长度，例如XMLHttpRequest (opens new window)，SVG (opens new window)，image或script。

这个接口使用high-resolution timestamps (opens new window) 属性创建加载资源时间轴，用于网络事件，例如重定向开始( redirect start )和结束时间，获取开始( fetch start )，DNS查找开始( DNS lookup start )和结束时间，响应开始( response start )和结束时间等。此外，接口扩展PerformanceEntry (opens new window)与其他属性，这些属性提供有关获取资源大小的数据以及初始化时获取的资源类型。

此接口通过限定和约束PerformanceEntry (opens new window)属性来扩展资源性能条目类型，如下所示：

PerformanceEntry.entryType (opens new window)只读

返回 "resource".

PerformanceEntry.name (opens new window)只读

返回 resources URL.

下面可能是一些比较有用的属性

PerformanceEntry.duration

它是responseEnd和startTime 属性之间的差值。 应该可以理解为这个资源加载需要的时间

# 4、PerformancePaintTiming

Paint Timing (opens new window) 提供的PerformancePaintTiming是一个提供页面在构建过程中的“绘制”（也称“渲染”）时间点信息的接口。“绘制”是指将渲染树转换为页面上像素的过程。

也是扩展自PerformanceEntry

PerformanceEntry.entryType返回 "paint".

PerformanceEntry.name返回 "first-paint" 或"first-contentful-paint".

function showPaintTimings() {
  if (window.performance) {
    let performance = window.performance;
    let performanceEntries = performance.getEntriesByType('paint');
    performanceEntries.forEach( (performanceEntry, i, entries) => {
      console.log("The time to " + performanceEntry.name + " was " + performanceEntry.startTime + " milliseconds.");
    });
  } else {
    console.log('Performance timing isn\'t supported.');
  }
}

应用可以为名为“paint”的performance entry 类型注册一个PerformanceObserver，然后观察者可以获取绘制相关的事件发生的时间。以此来帮你找出那些花费太多时间去绘制的区域，而后提升用户体验。

# 4.1PerformanceObserver

PerformanceObserver 用于监测性能度量事件，在浏览器的性能时间轴记录下一个新的 performance entries (opens new window) 的时候将会被通知 。

function perf_observer(list, observer) {
  console.log(list.getEntries());
}
var observer2 = new PerformanceObserver(perf_observer);
observer2.observe({
  entryTypes: ['measure', 'mark', 'resource', 'navigation', 'paint']
});

# 5、PerformanceMark、PerformanceMeasure、PerformanceFrameTiming

也都继承自PerformanceEntry，

后面再说

perfomace下方的 jsheap,document,nodes,listeners也是指标参数，可以帮助优化哦。

# 6、Performance.timeOrigin

接口 Performance (opens new window) 的只读属性 timeOrigin 返回一个表示 the performance measurement 开始时间的高精度 timestamp

# 7、Performance.getEntries()

getEntries() 对于给定的filter,此方法返回PerformanceEntry对象数组. 一般第一个元素可能是PerformanceNavigationTiming

window.addEventListener('load', () => {
  const entries = performance.getEntries();
  console.log(entries);
  // PerformanceNavigationTiming
  const perNavTiming = entries[0];
  console.log(perNavTiming.domContentLoadedEventEnd);
});

# 8、paint timing api

  1. First-Paint

    FP是页面导航与浏览器将该网页的第一个像素渲染到屏幕上所用的中间时,渲染是任何与输入网页导航前的屏幕上的内容不同的内容。

  2. First-Contentful-Paint

    (FCP) is when the browser renders the first bit of content from the DOM, providing the first feedback to the user that the page is actually loading. The question "Is it happening?" is "yes" when the first contentful paint completes.

    The First Contentful Paint time stamp is when the browser first rendered any text, image (including background images), non-white canvas or SVG. This excludes any content of iframes, but includes text with pending webfonts. This is the first time users could start consuming page content.

    FCP浏览器首次绘制来自DOM的内容，提供给用户页面正在加载的反馈，渲染的内容可以是文字、图片（背景图）、非空白的canvas或者svg。不包括iframe内容。这是用户第一次可以看到内容

  3. First Meaningful Paint

    (FMP) is the paint after which the biggest above-the-fold layout change has happened and web fonts have loaded. It is when the answer to "Is it useful?" becomes "yes", upon first meaningful paint completion. FMP首次有意义的绘制 是在该绘制之后发生了最大的首屏布局更改并加载了 Web 字体

  4. Largest Contentful Paint

    LCP The LargestContentfulPaint interface of the Largest Contentful Paint API (opens new window) provides details about the largest image or text paint before user input on a web page. The timing of this paint is a good heuristic for when the main page content is available during load.

# 9、关于Chrome的performance

performance

FP (First Paint)首次绘制
FCP (First Contentful Paint) 首次内容绘制 
LCP (Largest Contentful Paint)最大内容渲染
DCL (DomContentloaded) 
FMP(First Meaningful Paint) 首次有效绘制
L (onLoad)
TTI (Time to Interactive) 可交互时间 
TBT (Total Blocking Time) 页面阻塞总时长
FID (First Input Delay) 首次输入延迟
CLS (Cumulative Layout Shift) 累积布局偏移
SI (Speed Index)

一般SSR提升最多的就是TTI指标

上次更新: 1/22/2025, 9:39:13 AM

← 浏览器渲染原理 →