必看！2025年单北斗GNSS变形监测最具性价比的8款高口碑产品推荐
2025/12/29 17:15:27
Python + HAR 一键生成页面性能测试报告
通过Python解析HAR文件并自动生成可视化的页面性能测试报告，下面提供一套完整、可直接落地的实现方案，涵盖HAR解析、性能指标提取、HTML报告生成全流程。
一、方案概述
- HAR文件说明：HAR（HTTP Archive）是一种JSON格式的文件，用于记录浏览器与服务器之间的HTTP请求/响应详情及页面加载性能数据，可通过Chrome、Firefox等浏览器的开发者工具获取。
- 核心依赖库：
haralyzer：专门用于解析HAR文件，提取性能指标和请求数据，简化手动解析JSON的复杂度。jinja2：轻量级模板引擎，用于快速渲染HTML报告，支持自定义报告样式和结构。json：Python内置库，辅助读取和解析HAR文件（haralyzer底层也依赖此库）。
- 实现流程：获取HAR文件 → Python解析HAR → 提取关键性能指标 → 渲染HTML模板 → 生成可视化报告。
二、环境准备
先安装所需依赖库，执行以下命令：
pipinstallharalyzer jinja2三、关键步骤实现
步骤1：获取HAR文件（浏览器操作）
以Chrome浏览器为例，获取页面HAR文件：
- 打开Chrome浏览器，访问需要测试的页面。
- 按
F12打开开发者工具，切换到Network面板。 - 勾选面板左上角的
Preserve log（保留日志）。 - 刷新页面（或重新加载目标页面），等待所有请求加载完成。
- 右键点击
Network面板中的任意请求，选择Save all as HAR with content，保存为.har格式文件（如page_perf.har）。
步骤2：Python解析HAR文件并提取性能指标
编写Python脚本，解析HAR文件，提取核心页面性能指标（如页面加载时间、DNS查询时间、TTFB等）和请求详情。
importjsonfromharalyzerimportHarParser,HarPagefromdatetimeimportdatetimedefparse_har_file(har_file_path):""" 解析HAR文件，提取页面性能指标和请求数据 :param har_file_path: HAR文件路径 :return: 性能指标字典 + 详细请求列表 """# 读取HAR文件try:withopen(har_file_path,'r',encoding='utf-8')asf:har_data=json.load(f)exceptFileNotFoundError:raiseException(f"错误：未找到HAR文件{har_file_path}")exceptjson.JSONDecodeError:raiseException(f"错误：{har_file_path}不是合法的JSON格式HAR文件")# 初始化HAR解析器har_parser=HarParser(har_data)# 获取页面信息（若HAR包含多个页面，取第一个页面）har_pages=har_parser.pagesifnothar_pages:raiseException("错误：HAR文件中未包含页面性能数据")target_page:HarPage=har_pages[0]# 提取核心性能指标（单位：毫秒）perf_metrics={"页面名称":target_page.page_titleor"未命名页面","测试时间":datetime.fromtimestamp(int(target_page.start_time.timestamp())).strftime("%Y-%m-%d %H:%M:%S"),"页面加载总时间":round(target_page.page_load_time,2),# 页面完全加载时间"DNS查询总时间":round(target_page.dns_time,2),# DNS解析总耗时"TCP连接总时间":round(target_page.tcp_time,2),# TCP三次握手总耗时"首字节时间（TTFB）":round(target_page.ttfb,2),# 服务器响应首字节时间"请求发送时间":round(target_page.send_time,2),# 请求数据发送耗时"响应接收时间":round(target_page.receive_time,2),# 响应数据接收耗时"资源加载总时间":round(target_page.ssl_time+target_page.send_time+target_page.receive_time,2),"总请求数":len(target_page.requests),# 页面总请求数量"失败请求数":len([reqforreqintarget_page.requestsifreq.status_code>=400]),# 错误请求数"静态资源数（JS/CSS/图片）":len([reqforreqintarget_page.requestsifreq.resource_typein["script","stylesheet","image"]])}# 提取详细请求列表request_details=[]forreqintarget_page.requests:request_info={"请求URL":req.url,"请求方法":req.method,"状态码":req.status_code,"资源类型":req.resource_typeor"unknown","请求耗时（ms）":round(req.time,2),"DNS耗时（ms）":round(req.dns_time,2),"TCP耗时（ms）":round(req.tcp_time,2),"TTFB（ms）":round(req.ttfb,2),"响应大小（B）":req.response_sizeor0}request_details.append(request_info)returnperf_metrics,request_details步骤3：使用Jinja2渲染HTML报告模板
- 先创建HTML模板文件（命名为
perf_report_template.html），定义报告样式和结构：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>{{ perf_metrics.页面名称 }} - 性能测试报告</title><style>*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",sans-serif;}.container{width:95%;margin:20px auto;}.report-header{text-align:center;padding:15px;background-color:#f5f5f5;border-radius:5px;margin-bottom:20px;}.metrics-card{background-color:#f8f9fa;padding:20px;border-radius:5px;margin-bottom:20px;box-shadow:0 2px 4pxrgba(0,0,0,0.1);}.metrics-card h2{color:#2c3e50;margin-bottom:15px;border-bottom:2px solid #3498db;padding-bottom:10px;}.metrics-table{width:100%;border-collapse:collapse;margin-top:10px;}.metrics-table th, .metrics-table td{border:1px solid #ddd;padding:12px;text-align:left;}.metrics-table th{background-color:#3498db;color:white;font-weight:bold;}.metrics-table tr:nth-child(even){background-color:#f2f2f2;}.warning{color:#e67e22;font-weight:bold;}.error{color:#e74c3c;font-weight:bold;}</style></head><body><divclass="container"><divclass="report-header"><h1>{{ perf_metrics.页面名称 }} - 页面性能测试报告</h1><p>生成时间：{{ generate_time }} | 测试时间：{{ perf_metrics.测试时间 }}</p></div><!-- 核心性能指标展示 --><divclass="metrics-card"><h2>一、核心性能指标</h2><tableclass="metrics-table"><thead><tr><th>性能指标</th><th>数值</th><th>单位</th><th>说明</th></tr></thead><tbody><tr><td>页面加载总时间</td><td>{{ perf_metrics.页面加载总时间 }}</td><td>毫秒（ms）</td><td>页面从开始加载到完全渲染完成的总耗时</td></tr><tr><td>DNS查询总时间</td><td>{{ perf_metrics.DNS查询总时间 }}</td><td>毫秒（ms）</td><td>域名解析的总耗时，越小表示解析越快</td></tr><tr><td>TCP连接总时间</td><td>{{ perf_metrics.TCP连接总时间 }}</td><td>毫秒（ms）</td><td>TCP三次握手的总耗时，反映网络连接效率</td></tr><tr><td>首字节时间（TTFB）</td><td>{{ perf_metrics.首字节时间（TTFB） }}</td><td>毫秒（ms）</td><td>从请求发送到接收服务器首个字节的时间，反映服务器响应速度</td></tr><tr><td>总请求数</td><td>{{ perf_metrics.总请求数 }}</td><td>个</td><td>页面加载的所有HTTP/HTTPS请求数量</td></tr><tr><td>失败请求数</td><tdclass="{% if perf_metrics.失败请求数 > 0 %}error{% endif %}">{{ perf_metrics.失败请求数 }}</td><td>个</td><td>状态码≥400的异常请求数量，理想值为0</td></tr><tr><td>静态资源数（JS/CSS/图片）</td><td>{{ perf_metrics.静态资源数（JS/CSS/图片） }}</td><td>个</td><td>页面加载的核心静态资源数量</td></tr></tbody></table></div><!-- 详细请求列表展示 --><divclass="metrics-card"><h2>二、详细请求列表</h2><tableclass="metrics-table"><thead><tr><th>请求URL</th><th>请求方法</th><th>状态码</th><th>资源类型</th><th>请求耗时（ms）</th><th>DNS耗时（ms）</th><th>TCP耗时（ms）</th><th>TTFB（ms）</th><th>响应大小（B）</th></tr></thead><tbody>{% for req in request_details %}<tr><td>{{ req.请求URL }}</td><td>{{ req.请求方法 }}</td><tdclass="{% if req.状态码 >= 400 %}error{% endif %}">{{ req.状态码 }}</td><td>{{ req.资源类型 }}</td><td>{{ req.请求耗时（ms） }}</td><td>{{ req.DNS耗时（ms） }}</td><td>{{ req.TCP耗时（ms） }}</td><td>{{ req.TTFB（ms） }}</td><td>{{ req.响应大小（B） }}</td></tr>{% endfor %}</tbody></table></div></div></body></html>- 编写Python脚本，加载模板并生成最终HTML报告：
fromjinja2importEnvironment,FileSystemLoaderimportosdefgenerate_perf_report(har_file_path,output_report_path=None):""" 一键生成页面性能测试HTML报告 :param har_file_path: HAR文件路径 :param output_report_path: 输出报告路径（默认：当前目录 + 页面名称 + _perf_report.html） :return: 生成的报告路径 """# 1. 解析HAR文件perf_metrics,request_details=parse_har_file(har_file_path)# 2. 配置Jinja2模板环境# 获取当前目录（模板文件需与脚本在同一目录）current_dir=os.path.dirname(os.path.abspath(__file__))env=Environment(loader=FileSystemLoader(current_dir))# 加载HTML模板template=env.get_template("perf_report_template.html")# 3. 准备模板渲染数据render_data={"perf_metrics":perf_metrics,"request_details":request_details,"generate_time":datetime.now().strftime("%Y-%m-%d %H:%M:%S")}# 4. 确定输出报告路径ifnotoutput_report_path:page_name=perf_metrics["页面名称"].replace("/","_").replace("\\","_").replace(":","_")output_report_path=f"{page_name}_perf_report.html"# 5. 渲染并生成HTML报告withopen(output_report_path,'w',encoding='utf-8')asf:f.write(template.render(render_data))returnoutput_report_path# 主函数：一键执行if__name__=="__main__":# 配置参数：HAR文件路径（替换为你的HAR文件路径）HAR_FILE_PATH="page_perf.har"# 本地HAR文件# 可选：指定输出报告路径# OUTPUT_REPORT_PATH = "my_page_perf_report.html"try:# 生成报告report_path=generate_perf_report(HAR_FILE_PATH)# report_path = generate_perf_report(HAR_FILE_PATH, OUTPUT_REPORT_PATH)print(f"成功！页面性能测试报告已生成：{os.path.abspath(report_path)}")exceptExceptionase:print(f"失败：{e}")四、一键运行与使用
1. 文件目录结构
确保文件摆放如下：
├── page_perf.har # 你从浏览器导出的HAR文件 ├── perf_report_template.html # HTML模板文件 └── har_perf_report.py # Python脚本文件2. 执行脚本
- 修改
har_perf_report.py中的HAR_FILE_PATH为你的HAR文件名称（如page_perf.har）。 - 在终端执行Python脚本：
python har_perf_report.py - 执行成功后，当前目录会生成
.html格式的性能报告（如XXX_perf_report.html）。
3. 查看报告
双击生成的HTML报告文件，用任意浏览器打开，即可查看：
- 核心性能指标（页面加载时间、DNS/TCP耗时、TTFB等）。
- 所有请求的详细信息（URL、状态码、耗时、资源类型等）。
- 异常请求（状态码≥400）会用红色标注，便于快速排查问题。
五、报告关键指标解读
| 性能指标 | 含义与优化方向 |
|---|---|
| 页面加载总时间 | 页面完全加载耗时，越小越好；优化方向：减少资源体积、开启缓存、懒加载。 |
| DNS查询时间 | 域名解析耗时，优化方向：使用DNS缓存、选择优质DNS服务商、减少域名数量。 |
| TCP连接时间 | TCP握手耗时，优化方向：使用HTTP/2/HTTP/3、开启TCP复用、缩短网络链路。 |
| TTFB（首字节时间） | 服务器响应速度，优化方向：优化服务器接口、使用CDN、减少后端数据库查询耗时。 |
| 失败请求数 | 异常请求数量，理想值为0；需排查4xx/5xx错误（如接口异常、资源不存在）。 |
| 总请求数 | 请求数量越多，加载越慢；优化方向：资源合并（JS/CSS合并）、雪碧图、减少冗余请求。 |
六、扩展优化
- 支持多页面HAR：修改脚本，遍历
har_parser.pages，为每个页面生成独立报告。 - 增加性能阈值判断：在模板中添加阈值配置（如页面加载时间＞3000ms标红警告）。
- 导出Excel报告：结合
pandas库，将性能数据导出为Excel格式，方便批量统计。 - 添加图表可视化：在HTML模板中引入ECharts，生成请求耗时分布、资源类型占比等图表。
总结
- 核心流程：HAR文件获取（浏览器）→ Python解析（haralyzer）→ 指标提取 → Jinja2渲染HTML报告。
- 关键依赖：
haralyzer简化HAR解析，jinja2实现灵活的HTML报告定制。 - 一键使用：替换HAR文件路径，执行脚本即可生成可视化报告，快速排查页面性能瓶颈。