性能优化 - 前端性能监控和性能指标计算方式

前言

利用LightHouse进行合理的页面性能优化 这篇文章主要讲解了如何使用Lighthouse。 这里把相关图片再展示一下：

我们可以看到Lighthouse计算的时候，会根据这几个维度的指标来计算总分。那么本篇文章，就主要讲解下前端性能监控相关的重要指标含义和计算方式。

一. 性能指标介绍

在介绍指标之前，我们首先应当知道这些数据可以从哪里获取。JS里面，有一个 performance 对象，它是专门用来用于性能监控的对象，内置了一些前端需要的性能参数。

我们随便打开一个浏览器，在终端控制台输入以下内容：

performance.getEntriesByType('navigation')

如图：

1.1 单一指标介绍

1. navigationStart：导航开始的时间，即浏览器开始获取页面的时间。
2. redirectCount：重定向次数，表示在导航过程中发生的重定向次数。
3. type：导航类型，可能的取值有：
   • navigate：常规导航，例如用户点击链接或输入URL进行的导航。
   • reload：页面重新加载。
   • back_forward：通过浏览器的前进或后退按钮导航。
4. unloadEventStart：前一个页面的unload事件开始的时间。
5. unloadEventEnd：前一个页面的unload事件结束的时间。
6. redirectStart：重定向开始的时间。
7. redirectEnd：重定向结束的时间。
8. fetchStart：浏览器开始获取页面资源的时间。
9. domainLookupStart：域名解析开始的时间。
10. domainLookupEnd：域名解析结束的时间。
11. connectStart：建立与服务器连接开始的时间。
12. connectEnd：建立与服务器连接结束的时间。
13. secureConnectionStart：安全连接开始的时间，如果不是安全连接，则该值为0。
14. requestStart：向服务器发送请求的时间。
15. responseStart：接收到服务器响应的时间。
16. responseEnd：接收到服务器响应并且所有资源都已接收完成的时间。
17. domLoading：开始解析文档的时间。
18. domInteractive：文档解析完成并且所有子资源（例如图片、样式表等）也已加载完成的时间。
19. domContentLoadedEventStart：DOMContentLoaded事件开始的时间，表示HTML文档解析完成并且所有脚本文件已下载完成。
20. domContentLoadedEventEnd：DOMContentLoaded事件结束的时间，表示所有脚本文件已执行完成。
21. domComplete：文档和所有子资源（例如图片、样式表等）都已完成加载的时间。
22. loadEventStart：load事件开始的时间，表示所有资源（包括图片、样式表、脚本文件等）都已加载完成。
23. loadEventEnd：load事件结束的时间，表示所有资源（包括图片、样式表、脚本文件等）都已执行完成。

1.2 指标计算

我们看下图

我们从上图出发，分别对各个阶段进行计算，我们说下几个比较重要的阶段，按照从左往右的顺序。

① Redirect(重定向耗时)

表示从重定向开始（redirectStart）到重定向结束的时间（redirectEnd）的时间间隔，它反映了浏览器在这段时间内完成了重定向的过程：

const redirectTime = redirectEnd - redirectStart

② AppCache(应用程序缓存的DNS解析)

这一部分也是在进行DNS解析，在使用AppCache（应用程序缓存）的情况下，浏览器会在加载页面时检查缓存中是否存在相应的资源，并根据需要更新缓存：

const appcacheTime = domainLookupStart - fetchStart

③ DNS(DNS解析耗时)

DNS解析耗时：在浏览器加载网页时，当需要与服务器建立连接时，浏览器会首先进行DNS解析，将域名转换为对应的IP地址。DNS解析的过程包括向DNS服务器发送查询请求、等待DNS服务器响应以及获取到IP地址。

dns = domainLookupEnd - domainLookupStart

④ TCP(TCP连接耗时)

TCP连接耗时：在浏览器加载网页时，当浏览器需要与服务器建立连接时，它会向服务器发送请求，并等待服务器响应。建立连接的过程包括TCP握手、SSL握手等。

tcp = connectEnd - connectStart

其中还有建立SSL连接的时间，包括在TCP耗时里面。

ssl = connectEnd - secureConnectionStart

⑤ TTFB(请求响应耗时)

请求耗时：从发送请求到接收到服务器响应的第一个字节所花费的时间。

ttfb = responseStart - requestStart

⑥ Trans(内容传输耗时)

当浏览器发送请求后，服务器会返回相应的响应，这个差值就是衡量浏览器接收服务器响应的耗时。

trans = responseEnd - responseStart

⑦ DOM(DOM解析耗时)

DOM这一块比较复杂，实际上还能分成3个小DOM阶段。

1. 阶段一（注意，上图中并没有显式地展示出来）：解析DOM阶段。

const dom1 = domInteractive - responseEnd

2. 阶段二：文档解析完成，html、js解析完成，css、图片加载完成。即加载DOM阶段。

const dom2 = domComplete-domInteractive

3. 阶段二当中还可以分出一小个阶段：代表从开始加载DOM内容到DOM内容加载完成的时间间隔。

const domLoaded = domContentLoadedEventEnd - domContentLoadedEventStart

1.3 FP(first-paint) 和 FCP(first-contentful-paint)

FP（first-paint）和FCP（first-contentful-paint）

FP指的是浏览器首次将像素渲染到屏幕上的时间点，即页面开始渲染的时间点。通常情况下，FP是指浏览器首次绘制任何可见的内容，包括背景色、文字、图片等，但不包括用户界面的控件，比如滚动条、按钮等。

FCP指的是浏览器首次将页面的有意义的内容渲染到屏幕上的时间点，即页面开始呈现有意义的内容的时间点。有意义的内容可以是文本、图片、视频等，但不包括背景色、边框等无意义的内容。

一般情况下，两者基本上没有什么区别，来说下两者的获取方式：

const fp = performance.getEntriesByName('first-paint')[0].startTime
const fcp = performance.getEntriesByName('first-contentful-paint')[0].startTime

后面我们都只说FCP。

1.4 LCP(Largest Contentful Paint)

LCP：Largest Contentful Paint ：它表示在页面加载过程中，最大的可见内容元素（例如图片、视频、文本块等）加载完成并呈现在屏幕上的时间点。，是测量加载速度感知的重要指标之一。

获取方式，我们主要通过Performance 来进行监听：

new PerformanceObserver((entryList) => {var maxSize = 0;var renderTime = 0;for (var entry of entryList.getEntries()) {// 渲染的内容看最大值if(entry.size > maxSize){maxSize = entry.size;renderTime = entry.startTime;}}console.log('LCP', renderTime)
}).observe({type: 'largest-contentful-paint', buffered: true});

1.5 LongTask长任务统计

LongTask（长任务）是指在JavaScript主线程上执行时间超过50毫秒的任务。这些任务可能是复杂的计算、大量数据处理、DOM操作或其他耗时的操作。

我们可以通过以下方式来获取：

new PerformanceObserver((entryList) => {var list = entryList.getEntries();var entry = list[list.length-1];if(entry){console.log('LongTask',entry.startTime)}
}).observe({type: 'longtask', buffered: true});

一般我们取最后一个就是长任务的总耗时。这个值越低，性能越高。

二. 性能指标计算测试

贴出案例代码：

function test() {const entry = performance.getEntriesByType('navigation')[0]const {domComplete, secureConnectionStart, domInteractive, domContentLoadedEventStart, domainLookupEnd,domainLookupStart, connectEnd, connectStart, responseStart, requestStart, responseEnd, loadEventStart, domContentLoadedEventEnd, fetchStart, redirectEnd, redirectStart} = entry// redirectTimeconst redirectTime = redirectEnd - redirectStart// appcacheTimeconst appcacheTime = domainLookupStart - fetchStart// DNS解析时间const dnsTime = domainLookupEnd - domainLookupStart// TCP建立时间const tcpTime = connectEnd - connectStart// ssl 时间const sslTime = connectEnd - secureConnectionStart// requestTime 读取页面第一个字节的时间(请求时间)const requestTime = responseStart - requestStart// 返回响应时间const responseTime = responseEnd - responseStart// domContentLoadedEventEnd - domContentLoadedEventStartconst domLoaded = domContentLoadedEventEnd - domContentLoadedEventStart// loadEventEnd - loadEventStartconst loadTime = loadEventStart - domContentLoadedEventEndconst dom1 = domInteractive - responseEnd// 解析dom树耗时const dom2 = domComplete - domInteractiveconsole.log('********各个阶段的消耗耗时********')console.log('redirectTime', redirectTime)console.log('appcacheTime', appcacheTime)console.log('dnsTime', dnsTime)console.log('tcpTime', tcpTime, '其中包括ssl时间', sslTime)console.log('TTFB(请求响应耗时)', requestTime)console.log('Trans(内容传输耗时)', responseTime)console.log('解析`DOM`阶段', dom1)console.log('加载`DOM`阶段', dom2, '其中包括(domContentLoadedEventEnd - domContentLoadedEventStart)', domLoaded)console.log('load事件耗时', loadTime)console.log('********校验时间差********')console.log('***********校验 responseStart - fetchStart差值**************');console.log('responseStart - fetchStart', responseStart - fetchStart)console.log('appCache + dns+ tcp + requestTime 总和:', appcacheTime + dnsTime + tcpTime + requestTime)console.log('***********校验 domInteractive - fetchStart差值**************');const tmp = appcacheTime + dnsTime + tcpTime + requestTime + responseTimeconst diff = domInteractive - fetchStartconsole.log('domInteractive - fetchStart', diff)console.log( 'appCache + dns+ tcp + request + response, 总和:', tmp, ', 空白时间', diff - tmp)console.log('空白时间(就是文档解析和构建DOM树的过程)，即DOM1(domInteractive - responseEnd)', dom1)// 算一下domCompelete - fetchStartconsole.log('domCompelete - fetchStart', domComplete - fetchStart)console.log('********FCP********')const fcp = performance.getEntriesByName('first-contentful-paint')[0].startTimeconsole.log("LCP(通过performance.getEntriesByName('first-contentful-paint')计算出来的)", fcp)console.log('********LCP********')new PerformanceObserver((entryList) => {var maxSize = 0;var renderTime = 0;for (var entry of entryList.getEntries()) {// 渲染的内容看最大值if (entry.size > maxSize) {maxSize = entry.size;renderTime = entry.startTime;}}console.log('LCP', renderTime)}).observe({ type: 'largest-contentful-paint', buffered: true });console.log('********LongTask********')new PerformanceObserver((entryList) => {var list = entryList.getEntries();var entry = list[list.length - 1];if (entry) {console.log('LongTask', entry.startTime)}}).observe({ type: 'longtask', buffered: true });
}

复制这段代码到浏览器中，然后运行test()即可，结果如下：(FCP打印错了）

代码里主要打印了各个阶段的耗时时长。我们主要看下下半部分的校验部分。再把上面的图搬过来对照着看：

2.1 衡量网络请求响应时间的指标

从发起网络请求（fetchStart）到服务器开始响应（responseStart）的时间间隔。

• responseStart - fetchStart的差值为257毫秒。
• 而这个差值由：appCache + dns+ tcp + requestTime 4个阶段连接而成，4个阶段的时间总和为256.5毫秒，基本上接近。

2.2 衡量页面加载速度的指标

从发起网络请求（fetchStart）到DOM解析完成（domInteractive）的时间间隔

• domInteractive - fetchStart的差值为1328毫秒。
• 而这个差值由：appCache + dns+ tcp + request + response + 空白时间 部分组成（空白时间就是上图的红色框部分）。
• 我们可以看到，前5个区域的时间总和大概是：480毫秒。空白时间则848毫秒。
• 我们又计算了domInteractive - responseEnd的差值，实际上就是DOM1，也就是加载DOM的时间，时间差为848毫秒，相吻合。

综上所述：

• 页面加载速度的指标可以由：DNS+TCP+Request+Response+DOM加载完毕耗时 的总和来决定。

另外我们还能看出来，LCP的计算可以几乎为：domInteractive - fetchStart, 当然你用PerformanceObserver进行监听也是可以的。

这里代表页面加载速度，此时DOM仅仅是解析完成，如果想看DOM也加载完成的耗时，看指标domComplete - fetchStart。

2.3 TTI(Time to Interactive)衡量页面可交互性的指标

TTI：表示从页面开始加载到用户可以与页面进行交互的时间。它的计算方式如下：

1. FCP 时间为起始时间
2. 查找到指示有5s的静默窗口时间（没有长任务并且不超过两个正在执行的GET请求）。
3. 向后搜索静默窗口前的最后一个长任务，如果没有找到长任务，则在FCP上停止。
4. TTI 是在安静窗口之前最后一个长任务的结束时间（如果没有找到长任务，则与FCP相同）

建议大家使用谷歌官方提供的：tti-polyfill

import ttiPolyfill from './path/to/tti-polyfill.js';ttiPolyfill.getFirstConsistentlyInteractive(opts).then((tti) => {// Use `tti` value in some way.
});

当然，也可以使用一种较为粗略的方式来计算：

1. 首先我们理解一下TTI，是从页面开始加载到用户可以与页面进行交互的时间。
2. 页面开始加载，我们是不是可以看做fetchStart的时间。
3. 页面进行交互的时间，那这个时候dom肯定是加载完毕了。我们按照非常极限的思路去想，这个是不是可以看做dom加载完毕的时间点，即domComplete。
4. 那么TTI ≈ domComplete - fetchStart

例如我用Lighthouse计算出来的TTI：

使用：domComplete - fetchStart 计算出来的值：

function getTTI(){const entry = performance.getEntriesByType('navigation')[0]const {domComplete,fetchStart} = entryconsole.log('TTI', domComplete - fetchStart)
}
getTTI()

结果如下：

2.4 TBT(Total Blocking Time)

TBT就是衡量从FCP时间点到TTI这个时间点的时间区间内，所有超过50毫秒的长任务的总耗时。（这个看下来难以通过编码的方式来实现计算，也无法预估）

2.5 总结

1. 我们在为页面做性能监控的时候，LCP和FCP是我们的几个重要关注对象。
2. LCP可以通过PerformanceObserver进行检测。
3. FCP可以通过performance.getEntriesByName('first-contentful-paint')[0].startTime获取。
4. 页面性能的发部分数据都可以从performance.getEntriesByType('navigation')[0]这里面获取到。
5. 如果你想衡量网络请求响应时间的指标：responseStart - fetchStart，代表从发起网络请求（fetchStart）到服务器开始响应（responseStart）的时间间隔。
6. 如果你想衡量页面加载速度的指标：domInteractive - fetchStart，代表从发起网络请求（fetchStart）到DOM解析完成（domInteractive）的时间间隔。
7. domComplete - fetchStart 这个差值基本上囊括了最核心的部分。包括了从开始获取页面资源到 DOM 解析完成的整个过程，其中包括了网络请求、资源加载、解析 HTML、构建 DOM 树等操作。