Web 性能分析

👥 577 users

📦 v1.1

💾 422KiB

📅 2025-02-14

View on Chrome Web Store

Chrome will indicate if you already have this installed.

Overview

# 性能分析

使用 Performance API 处理数据可视化，本地使用本地展示，不会远程收集用户任何数据，展示数据也不会对当前网页造成任何破坏。

- 关键性能指标。忽略页面卸载时间、重定向时间。
1. 首包：`responseStart - domainLookupStart`
2. 首次渲染/白屏：`responseEnd - fetchStart`
3. 首次可交互：`domInteractive - fetchStart`
4. DOM Ready：`domContentLoadedEventEnd - fetchStart`
5. 页面加载：`loadEventStart - fetchStart`

- 各阶段指标瀑布流
1. unLoad：`unloadEventEnd - unloadEventStart`
2. Redirect：`redirectEnd - redirectStart`
3. AppCache：`domainLookupStart - fetchStart`
4. DNS：`domainLookupEnd - domainLookupStart`
5. TCP：`connectEnd - connectStart`
6. TTFB：`responseStart - requestStart`
7. 数据传输：`responseEnd - responseStart`
8. DOM：`domContentLoadedEventStart - responseEnd`
9. DCL：`domContentLoadedEventEnd - domContentLoadedEventStart`
10. 资源加载：`loadEventStart - domContentLoadedEventEnd`
11. onLoad：`loadEventEnd - loadEventStart`

- 资源分析
1. 首页资源请求数量、加载大小和域名分布情况。
2. 请求资源域名分布，与各个域名平均耗时。
3. 未设置响应头域名分布情况。
4. http 压缩情况，未压缩分布，缓存命中率。
5. 资源类型情况。
6. 显示资源加载和 ajax 请求耗时。