首页分析学习报告方案面向开发者联系
学习

学习 HAR 分析

浏览深度文章，了解如何捕获、阅读和排查 HTTP Archive 文件，并获得 HAR Analyzer 仪表板的引导式讲解。

从基础文章开始，了解什么是 HAR 文件以及如何使用它们。

学习基础知识

1. 介绍 / 什么是 HAR?

HAR 文件（HTTP Archive 的缩写）记录了浏览器在加载网页时网络层发生 的一切。它就像浏览会话的“黑匣子”——每一次请求、每一次响应、每一 个等待都被写入。

它存在的原因是现代网站十分复杂。一页内容可能触发上百个请求： HTML、JavaScript、CSS、字体、图片、API 调用、广告、追踪像素。如果 觉得页面慢或出问题，HAR 文件能精准展示问题所在——无论是服务器迟 缓、重定向循环，还是阻塞其他资源的脚本。

技术上，HAR 只是一个巨大的 JSON 文件。用文本编辑器打开，你会看到 url、status、timings 等结构化数据。对人来说也许很庞大，但对工具而 言很有价值：它是页面加载的完整时间线。

2. 何时使用 HAR 文件

当网页感觉不对劲时，HAR 最有用：加载很慢、图片缺失、登录失败、 或者转圈不停。它像侦探的笔记本，展示浏览器尝试做的每一步以及耗时 情况。

你可能在这些场景使用 HAR：

  • 诊断性能：找出慢页面是服务器、重定向过多还是 JavaScript 过重。
  • 排查网络错误：查看哪些请求失败、超时，或返回 404/500。
  • 分析第三方影响：识别广告脚本、分析埋点或嵌入组件导致的延迟。
  • 检查 API 调用：捕获应用发出的具体请求，包括 headers、payload 和 响应。
  • 与支持团队协作：许多 SaaS 供应商在你报 bug 时会索要 HAR，以便重 现浏览器经历。

3. 如何生成 HAR 文件

生成 HAR 直接内置在浏览器里，只需一分钟，不需要额外工具。

Chrome / Edge / Brave（Chromium 浏览器）

  1. 打开想要捕获的页面。
  2. 按 F12（或右键→检查）打开 DevTools。
  3. 切换到 Network 标签页。
  4. 确认红色 ● 录制按钮处于激活状态（若未激活请点击）。
  5. 刷新页面，从起点开始捕获所有内容。
  6. 等待页面完全加载。
  7. 在请求列表中右键 → 保存全部为 HAR（含内容）。

Firefox

  1. 打开页面。
  2. 按 F12 打开 DevTools。
  3. 切换到 Network 标签页。
  4. 确保录制已启用（红点亮起）。
  5. 刷新页面并等待加载完成。
  6. 在列表中右键 → 保存全部为 HAR。

⚠️ 提示与常见错误

  • 务必在刷新页面前开始录制。
  • 捕获期间不要切换标签页，浏览器可能暂停录制。
  • HAR 可能包含 cookies 或请求体等敏感数据，只与可信的人或工具分享。

4. 如何手动阅读 HAR 文件

在文本编辑器中打开 HAR 会看到巨大的 JSON 对象。每个条目代表一条请 求。最重要的字段包括：

  • url – 请求的地址。
  • status – HTTP 状态码（200、404 等）。
  • timings – 各阶段耗时：DNS、连接、等待服务器、下载内容。
  • request/response headers – cookies、user agent、缓存控制。
  • redirects – 浏览器是否在 URL 间跳转。

一些快速判断的小技巧：

  • 是否有很多 301/302 连续出现？可能是重定向链拖慢了加载。
  • "wait" 阶段很长（例如超过 500ms）而 DNS/TCP 很快？说明服务器响应慢 或已饱和。
  • "receive" 时间长？内容可能很大或连接很慢。
  • 页面加载后很久才出现的请求？可能是沉重的脚本或延迟的 API 调用。

手动阅读适合快速浏览，但当请求很多时，使用（如 HAR Analyzer）等工 具来聚合数据和突出异常更高效。

5. HAR 文件中常见的问题

HAR 会暴露一些在普通页面加载中不明显的问题。常见模式包括：

  • 重定向链： 多次 301/302 才到达最终页面，每一步都 增加延迟。
  • 间歇性错误： 500 或 503 与 200 混在一起，暗示服务 器不稳定。
  • 阻塞的字体请求： 迟到的 webfont 会拖慢文本渲染。
  • 过多 JS 库： 大量小脚本可以打包以减少连接数。
  • 缓慢的第三方请求： 广告或小组件阻塞其他请求。
  • 未缓存的静态资源： 缺少缓存头，导致每次都要重新下 载。

越早发现这些模式，就能越快确定优化优先级。

6. 分析 HAR 的工具

你可以用浏览器 DevTools 快速捕获和查看。更深入的分析可以使用：

  • HAR Analyzer： 上传 HAR，获取指标、图表和自动标记的 问题。
  • HTTP Archive 查看器： 开源工具，可逐条检查请求及其 时序。
  • 自定义脚本： 使用 Node 或 Python 遍历 JSON，提取团 队关注的指标。

根据目标选择工具：快速排查、持续监控或性能审计。

7. 分步示例

假设你的电商结账页加载需要 8 秒，而且部分图片缺失。捕获 HAR 后你发 现：

  • 到 /checkout 前有 4 次重定向（http→https、跳到 www 等）。
  • 多张图片请求返回 404 —— 部署后路径错误。
  • 一个第三方脚本响应耗时 2 秒，并阻塞其他请求。

有了这些数据，你可以修复图片链接、减少重定向，并将外部脚本改为异步 加载，从而加快体验。

8. 常见问题

HAR 是否包含敏感数据？

是的。它可能包含 cookies、会话 token 以及请求体。请像对待敏感数 据一样处理，只与可信的人或工具分享。

HAR 文件有多大？

取决于页面。拥有数百个请求的站点可能生成数 MB 的文件。若文件很 大，分享前请压缩（zip）。

分享前能否删除敏感数据？

你可以编辑 JSON，删掉 Authorization 或 cookies 等 header，但需小 心保持结构。部分工具也提供匿名化选项。

如何为已登录会话捕获 HAR？

正常登录后再开始在 Network 标签页录制即可，HAR 会包含认证请求。