# performance 分析

performance.getEntriesByType("navigation");

![记下这种图，对理解前端性能帮助很大](/files/-M0StFAlaUUF-0YBMknV)

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

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

## 测量资源加载时间

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mm.ricky.moe/frontend-ecosystem/ye-wu-kai-fa/xing-neng-jian-kong/performance-fen-xi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.