UD5工具箱
第一步：获取 HAR 数据
有两种方式获取分析所需的 HAR 数据：
方式一 - Chrome DevTools：在 Chrome 浏览器中打开目标页面，按 F12 打开开发者工具，切换到 Network（网络）标签页。刷新页面等待加载完成，在网络列表中任意位置右键，选择保存所有内容为 HAR，将文件保存到本地。用文本编辑器打开 .har 文件，全选复制其内容。
方式二 - WebPageTest：在 webpagetest.org 运行一次完整的页面性能测试，测试完成后在结果页面找到 Export HAR 按钮，下载 HAR 文件后同样用文本编辑器打开并复制内容。
第二步：粘贴数据并启动分析
打开本工具页面，在输入数据源文本框中粘贴复制的 HAR JSON 内容。如果想先体验工具功能，可以点击加载示例数据按钮，工具会自动填充一份预设的 HAR 数据。确认数据已粘贴后，点击分析瀑布图按钮开始解析。工具会在几秒内完成数据解析和可视化渲染。
第三步：查看性能指标概览
分析完成后，首先查看顶部的性能指标概览面板。重点关注以下指标：
- 页面加载时间：页面完全加载的总耗时，超过 3 秒通常需要优化
- DOMContentLoaded：DOM 树解析完成时间，影响用户感知的页面就绪速度
- 首字节时间（TTFB）：服务器响应速度的核心指标，优秀标准为 200ms 以内
- 资源总数：总请求量过多会增加浏览器负担，建议控制在合理范围
- 总传输大小：页面整体体积，影响移动网络下的加载速度
第四步：分析瀑布图
在瀑布图区域，横轴代表时间，每个水平条代表一个网络请求。颜色含义如下：
- 红色（阻塞）：资源在浏览器队列中排队等待的时间，通常受并发连接数限制
- 深绿（DNS）：域名解析耗时，过长说明 DNS 服务器响应慢
- 橙色（连接）：TCP 三次握手时间
- 紫色（SSL）：TLS/SSL 握手时间，仅 HTTPS 请求出现
- 绿色（等待）：从请求发出到收到首个字节的时间，即 TTFB
- 蓝色（下载）：接收响应内容的时间
使用缩放控件调整时间刻度，可以更精确地观察各个阶段的时间分布。
第五步：筛选与排序资源
利用资源类型筛选栏，选择性地查看特定类型的资源。例如，如果怀疑 JavaScript 文件导致渲染阻塞，可以选择 JS 筛选器，只查看所有 JS 资源的加载时序。切换到资源详情列表表格视图，点击列标题（如总耗时、大小、TTFB）进行排序，快速定位耗时最长或体积最大的资源。
第六步：查看诊断建议
滚动到性能诊断与优化建议区域，查看工具基于分析结果生成的自动化诊断报告。报告会指出关键的性能问题，如渲染阻塞资源、TTFB 过慢的请求、未压缩的大文件等，并给出具体的优化方向。将这些建议与团队的实际情况结合，制定优先级明确的优化方案。
第七步：对比分析（可选）
如果进行了性能优化，可以重新获取优化后的 HAR 数据，在本工具中再次分析。将两次分析结果进行对比，验证优化措施是否有效。对于持续的性能监控，建议定期使用 WebPageTest 在不同网络条件下测试，并使用本工具逐一分析结果。