• LCP 显示最大内容元素所需时间 (衡量网站初次载入速度)
  • FID 首次输入延迟时间 (衡量网站互动顺畅程度)
  • CLS 累计版面配置移转 (衡量网页元件视觉稳定性)
  • FCP 首屏，页面开始加载到内容任何部分呈现在屏幕上的时间（关注的焦点是内容，用于知道用户什么时候接收到文本，图像等有效信息）
  • FP 白屏，页面开始加载到浏览器检测到渲染，如背景改变，样式应用等。

Performance 是一个浏览器全局对象，提供了一组 API 用于编程式地获取程序在某些节点的性能数据。它包含一组高精度时间定义，以及配套的相关方法。我们可以直接在浏览器控制台打印window.performance 结果如下

  1. // 获取 performance 数据
  2. var performance = {
  3.     // memory 是非标准属性，只在 Chrome 有
  4.     // 我有多少内存
  5.     memory: {
  6.         usedJSHeapSize:  16100000, // JS 对象（包括V8引擎内部对象）占用的内存，一定小于 totalJSHeapSize
  7.         totalJSHeapSize: 35100000, // 可使用的内存
  8.         jsHeapSizeLimit: 793000000 // 内存大小限制
  9.     },
  11.     // 我从哪里来？
  12.     navigation: {
  13.         redirectCount: 0, // 如果有重定向的话，页面通过几次重定向跳转而来
  14.         type: 0           // 0   即 TYPE_NAVIGATENEXT 正常进入的页面（非刷新、非重定向等）
  15.                           // 1   即 TYPE_RELOAD       通过 window.location.reload() 刷新的页面
  16.                           // 2   即 TYPE_BACK_FORWARD 通过浏览器的前进后退按钮进入的页面（历史记录）
  17.                           // 255 即 TYPE_UNDEFINED    非以上方式进入的页面
  18.     },
  19. //  核心时间相关
  20.     timing: {
  21.         // 在同一个浏览器上下文中，前一个网页（与当前页面不一定同域）unload 的时间戳，如果无前一个网页 unload ，则与 fetchStart 值相等
  22.         navigationStart: 1441112691935,
  24.         // 前一个网页（与当前页面同域）unload 的时间戳，如果无前一个网页 unload 或者前一个网页与当前页面不同域，则值为 0
  25.         unloadEventStart: 0,
  27.         // 和 unloadEventStart 相对应，返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳
  28.         unloadEventEnd: 0,
  30.         // 第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算，否则值为 0
  31.         redirectStart: 0,
  33.         // 最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内部的重定向才算，否则值为 0
  34.         redirectEnd: 0,
  36.         // 浏览器准备好使用 HTTP 请求抓取文档的时间，这发生在检查本地缓存之前
  37.         fetchStart: 1441112692155,
  39.         // DNS 域名查询开始的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
  40.         domainLookupStart: 1441112692155,
  42.         // DNS 域名查询完成的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
  43.         domainLookupEnd: 1441112692155,
  45.         // HTTP（TCP） 开始建立连接的时间，如果是持久连接，则与 fetchStart 值相等
  46.         // 注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接开始的时间
  47.         connectStart: 1441112692155,
  49.         // HTTP（TCP） 完成建立连接的时间（完成握手），如果是持久连接，则与 fetchStart 值相等
  50.         // 注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接完成的时间
  51.         // 注意这里握手结束，包括安全连接建立完成、SOCKS 授权通过
  52.         connectEnd: 1441112692155,
  54.         // HTTPS 连接开始的时间，如果不是安全连接，则值为 0
  55.         secureConnectionStart: 0,
  57.         // HTTP 请求读取真实文档开始的时间（完成建立连接），包括从本地读取缓存
  58.         // 连接错误重连时，这里显示的也是新建立连接的时间
  59.         requestStart: 1441112692158,
  61.         // HTTP 开始接收响应的时间（获取到第一个字节），包括从本地读取缓存
  62.         responseStart: 1441112692686,
  64.         // HTTP 响应全部接收完成的时间（获取到最后一个字节），包括从本地读取缓存
  65.         responseEnd: 1441112692687,
  67.         // 开始解析渲染 DOM 树的时间，此时 Document.readyState 变为 loading，并将抛出 readystatechange 相关事件
  68.         domLoading: 1441112692690,
  70.         // 完成解析 DOM 树的时间，Document.readyState 变为 interactive，并将抛出 readystatechange 相关事件
  71.         // 注意只是 DOM 树解析完成，这时候并没有开始加载网页内的资源
  72.         domInteractive: 1441112693093,
  74.         // DOM 解析完成后，网页内资源加载开始的时间
  75.         // 在 DOMContentLoaded 事件抛出前发生
  76.         domContentLoadedEventStart: 1441112693093,
  78.         // DOM 解析完成后，网页内资源加载完成的时间（如 JS 脚本加载执行完毕）
  79.         domContentLoadedEventEnd: 1441112693101,
  81.         // DOM 树解析完成，且资源也准备就绪的时间，Document.readyState 变为 complete，并将抛出 readystatechange 相关事件
  82.         domComplete: 1441112693214,
  84.         // load 事件发送给文档，也即 load 回调函数开始执行的时间
  85.         // 注意如果没有绑定 load 事件，值为 0
  86.         loadEventStart: 1441112693214,
  88.         // load 事件的回调函数执行完毕的时间
  89.         loadEventEnd: 1441112693215
  91.         // 按照字母排序
  92.         // connectEnd: 1441112692155,
  93.         // connectStart: 1441112692155,
  94.         // domComplete: 1441112693214,
  95.         // domContentLoadedEventEnd: 1441112693101,
  96.         // domContentLoadedEventStart: 1441112693093,
  97.         // domInteractive: 1441112693093,
  98.         // domLoading: 1441112692690,
  99.         // domainLookupEnd: 1441112692155,
  100.         // domainLookupStart: 1441112692155,
  101.         // fetchStart: 1441112692155,
  102.         // loadEventEnd: 1441112693215,
  103.         // loadEventStart: 1441112693214,
  104.         // navigationStart: 1441112691935,
  105.         // redirectEnd: 0,
  106.         // redirectStart: 0,
  107.         // requestStart: 1441112692158,
  108.         // responseEnd: 1441112692687,
  109.         // responseStart: 1441112692686,
  110.         // secureConnectionStart: 0,
  111.         // unloadEventEnd: 0,
  112.         // unloadEventStart: 0
  113.     }
  114. }

b9af6c24b2a34f75970aaaad14098d98_tplv-k3u1fbpfcp-watermark.webp

使用 performance.timing 信息简单计算出网页性能数据

  • FP：responseStart - navigationStart
  • 重定向耗时：redirectEnd - redirectStart
  • DNS 查询耗时：domainLookupEnd - domainLookupStart
  • TCP 链接耗时：connectEnd - connectStart
  • HTTP 请求耗时：responseEnd - responseStart
  • 解析 dom 树耗时：domComplete - domInteractive
  • DOM ready 时间：domContentLoadedEventEnd - navigationStart

  • onload：loadEventEnd - navigationStart

    使用performance.getEntries()获取所有资源请求的时间数据

    获取所有资源请求的时间数据,这个函数返回一个按 startTime 排序的对象数组

    使用performance.getEntriesByName(name)获取特定名称的时间数据

  • FCP 首屏时间如何计算呢

我们可以通过 getEntriesByName(name)提供的 api 去获取 FCP 数据
FCP = performance.getEntriesByName(“first-contentful-paint”)[0].startTime - navigationStart

Performance面板

Summary：表示各指标时间占用统计报表

这里一般来说，需要着重关注的有两个：一是黄色的区域，代表脚本执行时间，另一个是紫色的渲染时间

Bottom-Up：表示事件时长排序列表（倒序）

这里有两列时间数据，一是”Self Time”代表任务自身执行所消耗的时间，二是”Total Time”代表此任务及其调用的附属子任务一共消耗的时间。这两列数据各有不同的用处，可以按自己的需求决定按哪列数据作为排序字段。
在 Activity 的右侧，部分还带有 Source Map 链接，点击之后可以定位到相应操作对应的代码。使用它可以比较方便地定位到具体的代码。

Call tree：表示事件调用顺序列表

Call Tree 中的内容，在 Bottom-Up 中也能看到，无明显的区别。

Event Log：表示事件发生的顺序列表

Event Log 中的内容，是按顺序记录的事件日志，数据比较多。常见的优化级别中一般用不到它。如果是比较大型的应用，打开它可能会直接导致 Chrome 卡死。

白屏和首屏的优化

目前白屏常见的优化方案有：

  • SSR
  • 预渲染
  • 骨架屏

优化首屏加载时间的方法：

  • CDN分发（减少传输距离）
  • 后端在业务层的缓存
  • 静态文件缓存方案
  • 前端的资源动态加载
  • 减少请求的数量
  • 利用好HTTP压缩