监听页面性能

在实际项目优化中，我们需要知道页面的加载情况，例如：页面加载时长、白屏时长、渲染时长、页面加载资源等，以便于更好的确定优化点。此时可以使用浏览器性能接口performance和PerformanceObserver
performance接口可以获取到当前页面中与性能相关的信息，本次监控主要用的的是此接口的getEntries方法和timing属性，和PerformanceObserver构造函数

整体思路

使用performance.getEntries和performance.timing获取当前页面本身和页面中已加载资源的情况，然后使用PerformanceObserver对页面后续加载资源进行监听

使用项介绍

1、performance.getEntries此方法可传入筛选条件根据筛选条件查询或不传返回全部PerformanceEntry 对象数组，此数组中为PerformanceResourceTiming对象，此对象包含当前页面上已请求资源的信息，包括请求时长、资源大小等

{
    "name": "资源路径",
    "entryType": "navigation",
    "startTime": 0,
    "duration": 1877.5,
    "initiatorType": "navigation",
    "nextHopProtocol": "h2",
    "renderBlockingStatus": "blocking",
    "workerStart": 0,
    "redirectStart": 0,
    "redirectEnd": 0,
    "fetchStart": 10.200000002980232,
    "domainLookupStart": 10.200000002980232,
    "domainLookupEnd": 10.200000002980232,
    "connectStart": 10.200000002980232,
    "connectEnd": 10.200000002980232,
    "secureConnectionStart": 10.200000002980232,
    "requestStart": 13.5,
    "responseStart": 28.30000000447035,
    "responseEnd": 28.80000000447035,
    "transferSize": 7048,
    "encodedBodySize": 6748,
    "decodedBodySize": 26713,
    "responseStatus": 0,
    "serverTiming": [],
    "unloadEventStart": 33.100000001490116,
    "unloadEventEnd": 33.100000001490116,
    "domInteractive": 1388.1000000014901,
    "domContentLoadedEventStart": 1388.3000000044703,
    "domContentLoadedEventEnd": 1388.3000000044703,
    "domComplete": 1876.8999999985099,
    "loadEventStart": 1876.8999999985099,
    "loadEventEnd": 1877.5,
    "type": "reload",
    "redirectCount": 0,
    "activationStart": 0
}

以上为pc端谷歌浏览器返回属性，注意，以上对象中的属性在移动端存在兼容性问题，不一定有值或没有对应属性，具体的请自行探索
注意：当entryType为navigation时在手机端并没有相应的时间属性返回，所以此时使用了已弃用属性performance.timing，目前发现entryType为别的类型时返回良好

使用示例

performance.getEntries({name: "entry_name", entryType: "mark"});

2、performance.timing 只读属性，返回一个 PerformanceTiming 对象，这个对象包括了页面相关的性能信息

{
    "connectStart": 1674976348636,
    "navigationStart": 1674976348625,
    "secureConnectionStart": 0,
    "fetchStart": 1674976348636,
    "domContentLoadedEventStart": 1674976350014,
    "responseStart": 1674976348654,
    "domInteractive": 1674976350014,
    "domainLookupEnd": 1674976348636,
    "responseEnd": 1674976348654,
    "redirectStart": 0,
    "requestStart": 1674976348639,
    "unloadEventEnd": 1674976348659,
    "unloadEventStart": 1674976348659,
    "domLoading": 1674976348660,
    "domComplete": 1674976350502,
    "domainLookupStart": 1674976348636,
    "loadEventStart": 1674976350502,
    "domContentLoadedEventEnd": 1674976350014,
    "loadEventEnd": 1674976350503,
    "redirectEnd": 0,
    "connectEnd": 1674976348636
}

注意：目前显示此timing属性已经弃用，但是亲测没有发现不支持的情况

3、PerformanceObserver构造函数使用给定的观察者 callback 生成一个新的 PerformanceObserver 对象，当页面中发生资源请求时会触发回调

const performanceObserver = new PerformanceObserver((list, obsercer) => {});
performanceObserver.observe({ entryTypes: ['resource', 'navigation'] });

list为页面资源列表数组对象，此数组中为PerformanceResourceTiming对象

具体使用

计算页面时长

使用timing返回的属性计算页面相应时长

navigationStart // 页面开始加载时间
responseStart - navigationStart // 页面白屏时长
responseEnd - requestStart // 页面请求时长
domComplete - domInteractive // 页面渲染时长
loadEventEnd - navigationStart // 页面加载总时长，包含请求页面主题和渲染

提取资源加载情况

使用performance.getEntries和PerformanceObserver返回的数组对象，获取页面资源加载情况。由于是做的简单的页面资源分析，所以不需要使用全部的返回属性，只需拿需要的属性保存即可

duration // 资源加载时长
name // 资源全路径
fileType // 资源类型，注：对象中并不会返回具体的资源类型，此属性是根据name自己计算的