performance分析-CFANZ编程社区

有关performance官网地址

前言

浏览器提供的 performance api，是性能监控数据的主要来源。performance 提供高精度的时间戳，精度可达纳秒级别，且不会随操作系统时间设置的影响。

基本属性

在控制台我们打印performance，可以看到下面这些api：

属性分析

performance.navigation: 页面是加载还是刷新、发生了多少次重定向

performance分析_加载_02

performance.timing: 页面加载的各阶段时长

performance分析_加载_03

各个阶段含义

performance分析_css_04

performance.memory：基本内存使用情况，Chrome 添加的一个非标准扩展

performance分析_加载_05

performance.timeorigin: 性能测量开始时的时间的高精度时间戳

performance分析_重定向_06

基本方法

performance.getEntries()

通过这个方法可以获取到所有的 performance 实体对象，通过 getEntriesByName 和 getEntriesByType 方法可对所有的 performance 实体对象进行过滤，返回特定类型的实体。

mark 方法和 measure 方法的结合可打点计时，获取某个函数执行耗时等。

performance分析_css_07

performance.getEntriesByName()
performance.getEntriesByType()
performance.mark()
performance.clearMarks()
performance.measure()
performance.clearMeasures()
performance.now() ...

提供的 API

performance 也提供了多种 API，不同的 API 之间可能会有重叠的部分。

1. PerformanceObserver API

用于检测性能的事件，这个 API 利用了观察者模式。

获取资源信息：

performance分析_加载_08

监测 TTI：

performance分析_加载_09

监测长任务：

performance分析_加载_10

2. Navigation Timing API

performance.getEntriesByType("navigation")

performance分析_加载_11

performance分析_重定向_12

不同阶段之间是不连续的，每个阶段不一定会发生

重定向次数：performance.navigation.redirectCount
重定向耗时: redirectEnd - redirectStart
DNS 解析耗时: domainLookupEnd - domainLookupStart
TCP 连接耗时: connectEnd - connectStart
SSL 安全连接耗时: connectEnd - secureConnectionStart
网络请求耗时 (TTFB): responseStart - requestStart
数据传输耗时: responseEnd - responseStart
DOM 解析耗时: domInteractive - responseEnd
资源加载耗时: loadEventStart - domContentLoadedEventEnd
首包时间: responseStart - domainLookupStart
白屏时间: responseEnd - fetchStart
首次可交互时间: domInteractive - fetchStart
DOM Ready 时间: domContentLoadEventEnd - fetchStart
页面完全加载时间: loadEventStart - fetchStart
http 头部大小：transferSize - encodedBodySize

3. Resource Timing API

performance.getEntriesByType("resource")

performance分析_加载_13

performance分析_css_14

// 某类资源的加载时间，可测量图片、js、css、XHR
resourceListEntries.forEach(resource => {
    if (resource.initiatorType == 'img') {
    console.info(`Time taken to load ${resource.name}: `, resource.responseEnd - resource.startTime);
    }
});

4. paint Timing API

首屏渲染时间、首次有内容渲染时间

performance分析_css_15

5. User Timing API

主要是利用 mark 和 measure 方法去打点计算某个阶段的耗时，例如某个函数的耗时等。

6. High Resolution Time API

主要包括 now() 方法和 timeOrigin 属性

7. Performance Timeline API

小结

基于 performance 我们可以测量如下几个方面：

mark、measure、navigation、resource、paint、frame。

let p = window.performance.getEntries();

重定向次数：performance.navigation.redirectCount

JS 资源数量: p.filter(ele => ele.initiatorType === "script").length

CSS 资源数量：p.filter(ele => ele.initiatorType === "css").length

AJAX 请求数量：p.filter(ele => ele.initiatorType === "xmlhttprequest").length

IMG 资源数量：p.filter(ele => ele.initiatorType === "img").length

总资源数量: window.performance.getEntriesByType("resource").length

不重复的耗时时段区分：

重定向耗时: redirectEnd - redirectStart
DNS 解析耗时: domainLookupEnd - domainLookupStart
TCP 连接耗时: connectEnd - connectStart
SSL 安全连接耗时: connectEnd - secureConnectionStart
网络请求耗时 (TTFB): responseStart - requestStart
HTML 下载耗时：responseEnd - responseStart
DOM 解析耗时: domInteractive - responseEnd
资源加载耗时: loadEventStart - domContentLoadedEventEnd

其他组合分析：

白屏时间: domLoading - fetchStart
粗略首屏时间: loadEventEnd - fetchStart 或者 domInteractive - fetchStart
DOM Ready 时间: domContentLoadEventEnd - fetchStart
页面完全加载时间: loadEventStart - fetchStart

JS 总加载耗时:

const p = window.performance.getEntries();
let cssR = p.filter(ele => ele.initiatorType === "script");
Math.max(...cssR.map((ele) => ele.responseEnd)) - Math.min(...cssR.map((ele) => ele.startTime))

CSS 总加载耗时:

const p = window.performance.getEntries();
let cssR = p.filter(ele => ele.initiatorType === "css");
Math.max(...cssR.map((ele) => ele.responseEnd)) - Math.min(...cssR.map((ele) => ele.startTime));

本文分享到这里，给朋友们推荐一个前端公众号

performance分析_css_16