# performance 分析

performance.getEntriesByType("navigation");

![记下这种图，对理解前端性能帮助很大](https://3490195898-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnQxDcxCKODvYvTUWe3%2F-M0SVSnV-ChGsaf76vlt%2F-M0StFAlaUUF-0YBMknV%2Fimage.png?alt=media\&token=4adf9a35-e24f-4bd4-aa9e-a2bda7094113)

不同阶段之间是连续的吗? —— 不连续 

每个阶段都一定会发生吗？—— 不一定

## 测量资源加载时间

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

## JS总加载时间

```javascript
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 加载耗时

```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));
```

## 总结

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