使用performance api实现页面加载瀑布图，核心是采集dns查询、tcp连接、ssl协商等内置性能时间点，通过navigation和resource类型条目解析各阶段耗时，并用html/css可视化为横向条形图。
使用 Performance API 实现页面加载瀑布图，核心是采集浏览器内置的性能时间点（如 DNS 查询、TCP 连接、SSL 协商、请求发送、响应接收等），再将这些阶段按时间轴可视化为横向条形图。关键在于正确读取 performance.getEntriesByType('navigation') 和 performance.getEntriesByType('resource')，并解析各阶段耗时。
获取导航和资源性能数据
页面加载主流程信息来自 navigation 类型条目，每个页面加载对应一个 navigation 记录；子资源（脚本、样式、图片等）则通过 resource 类型获取。两者都包含详细的分阶段时间戳：
- 调用
performance.getEntriesByType('navigation')[0]获取当前页面的完整导航性能对象（如loadEventStart、domContentLoadedEventEnd） - 调用
performance.getEntriesByType('resource')获取所有已加载资源的明细，每项含startTime、domainLookupStart、connectStart、requestStart、responseStart、responseEnd等字段 - 注意：部分字段在跨域资源上可能为 0（受 CORS 限制），需检查是否为有效数值再参与计算
计算各阶段持续时间
对每个 resource 条目，用相邻时间戳相减得出各阶段耗时。例如：
宝塔Linux面板11.3.0
下载
宝塔面板11.3.0是一款针对Linux服务器设计的可视化管理工具，通过重构核心模块实现资源占用显著降低，尤其适合低配置服务器环境。它将复杂的命令行操作转化为直观的图形界面，帮助开发者快速完成网站部署、环境配置及日常运维工作，无需专业技术背景即可高效管理服务器。
- DNS 查询时长 =
entry.domainLookupEnd - entry.domainLookupStart - TCP 连接时长 =
entry.connectEnd - entry.connectStart - SSL 协商时长（若存在）=
entry.secureConnectionStart > 0 ? entry.connectEnd - entry.secureConnectionStart : 0 - 等待响应时长（TTFB）=
entry.responseStart - entry.requestStart - 内容下载时长 =
entry.responseEnd - entry.responseStart - 注意起始时间统一以
entry.startTime为基准，所有阶段左对齐该时间点
绘制简易瀑布图（HTML + CSS 实现）
无需第三方图表库，用纯 HTML/CSS 即可呈现基础瀑布图：
- 为每个资源创建一行
<div class="bar-row">，内部按阶段顺序排列带宽度和颜色的 <code><span></span> - 各阶段宽度 =
(阶段耗时 / 总耗时) * 100% + 'px'，总耗时建议取整个资源生命周期（entry.duration）或自定义画布宽度 - 用不同背景色区分阶段（如 DNS 浅蓝、TCP 淡橙、TTFB 深蓝、下载绿色），添加 title 属性显示具体毫秒值便于悬停查看
- 顶部加时间刻度栏（如每 100ms 一条竖线），可通过绝对定位 + 伪元素实现
- Performance API 在 IE 中不支持或仅部分支持，生产环境建议做
performance && performance.getEntriesByType特性检测 - 页面需开启
timing-Allow-Origin响应头，才能获取跨域资源的完整阶段时间（否则多数网络阶段为 0） - 避免在页面刚加载时立即采集 —— 等待
performance.getEntriesByType('resource')稳定（如监听load或使用setTimeout(..., 0)微任务延后） - 资源过多时（如上百个请求），可按类型过滤（
entry.initiatorType === 'script'）、按耗时排序或只展示前 N 个慢资源
注意事项与优化建议
实际落地中需关注兼容性与数据可用性：
