网页性能诊断
能力定位
将“页面很慢”变成可复现、可归因、可验证的性能问题。输出不只是一个分数，而是测试场景、关键时间点、阻塞链、用户影响、修复建议、预期收益和回归方法。
适合冷启动、热缓存、登录后首页、列表滚动、弹窗交互、搜索筛选和单页应用路由切换。对没有现场工具或页面访问权限的任务，只交付采集方案和验收标准，不编造性能数据。
快速导航
- 需要设预算与上线门禁：读取 性能预算与验收。
- 已有时间线或网络记录：读取 时间线根因定位。
- 只有一个网址：先建立测试契约，再做 3 次冷启动采样。
- 只有截图：只能评估视觉现象，不能定位网络或主线程根因。
- 生产页面需登录：使用隔离的测试账号与可恢复路径，不提交真实业务数据。
新手30秒入门
提供页面入口、快慢现象、主要用户设备、网络、是否登录、问题发生时间和最近变更。例如：“移动端 4G 冷启动时首屏图常常 5 秒后出现，桌面端正常，昨天更换了首图。”
先返回 测试契约：URL/路径、页面状态、设备、网络、CPU、缓存、采样次数、关键用户动作、基线版本与安全边界。条件不足时不直接报根因。
功能索引
| 现象 | 主要证据 | 常见根因方向 |
|---|---|---|
| 首要内容出现慢 | 网络瀑布、请求优先级、渲染时间点 | 首字节、关键资源发现晚、图像或字体 |
| 点击后卡顿 | 交互时间线、长任务、事件处理 | 过量脚本、同步计算、频繁渲染 |
| 页面跳动 | 布局变化来源、元素前后位置 | 尺寸未保留、字体替换、延迟插入 |
| 二次访问仍慢 | 缓存头、重新验证、资源指纹 | 缓存策略、不稳定文件名、重复下载 |
| 部分地区慢 | 地理分组、连接建立、回源链 | 节点覆盖、DNS/TLS、回源延迟 |
| 只在真实用户出现 | 真实用户分位数与实验室重现 | 设备长尾、网络波动、个性化路径 |
标准工作流
1. 定义用户任务
不从“跑首页分数”开始。明确用户要看到什么、在什么时候点击、什么状态才算任务完成，并选择对应路径采集。
2. 固定测试条件
记录版本、时间、地域、设备、视口、网络、CPU、缓存、扩展、登录状态和测试数据。冷启动与热缓存分开报告，不混合取平均。
3. 建立对照基线
优先选择上一稳定版本、同类快页面或本次修改前的采样。至少采集 3 次，报告中位数和波动范围，不挑最好的一次。
4. 从里程碑定位慢段
比较导航开始、首字节、首次绘制、关键内容绘制、可交互和任务完成时点。先确定时间花在网络、主线程、渲染还是数据等待，再进入细节。
5. 解开网络依赖链
对关键资源记录请求发起者、队列、连接、等待、下载、大小、压缩和缓存。找出串行链、重复资源、无效预加载、过大响应和过多第三方连接。
6. 排查主线程与渲染
查看长任务、脚本解析/编译/执行、样式计算、布局、绘制和回收。将用户感知的卡顿对应到具体任务或重复更新，不只报“脚本太多”。
7. 定位关键元素
确认哪个元素贡献了首要内容时间，哪些元素导致布局变化，交互目标在什么时刻可用。尺寸、字体、占位和延迟内容作为一组分析。
8. 建立根因证据链
每个结论用“现象 → 证据 → 机制 → 建议 → 验证”表达。只有时间上同时发生而没有机制证据时，标为假设，不标为根因。
9. 按收益和风险排序
优先处理关键路径上、大多数用户受影响、改动面可控的问题。对每项建议标注预期影响、实施成本、回归风险和回退方案。
10. 同条件复测
只改一类变量后，用相同设备、网络、缓存和采样次数复测。同时检查功能正确性、视觉回归、服务端负载和长尾设备，防止用户体验只在测试机上变好。
输出规范
诊断报告至少包含：
场景：页面状态、用户动作、设备/网络/CPU、缓存和版本。基线：采样数、中位数、波动和对照版本。发现：影响用户的时间段与关键证据。根因或假设：明确证据强度，不混写。修复队列：优先级、预期收益、实施风险、负责边界与验证方法。
数字带单位、采样条件和时间范围。截图与时间线标注页面状态和采集次序，不单独用图片代替可结构化数据。
能力边界
- 实验室采样不代表所有真实用户；现场数据也不能单独解释代码根因。
- 无法访问页面、时间线或日志时，不伪造分数、时长或结论。
- 不在未授权的生产页执行下单、发布、删除、批量提交或压力测试。
- 不将敏感会话、个人信息、内部地址或未脱敏时间线发送给未经批准的外部服务。
- 不为了提高指标破坏可访问性、索引可见性、功能正确性或视觉完整性。
稳定性保障
每次采集记录测试契约和原始文件哈希。对冷/热缓存、首次/二次路由、登录前/后分别建档。连续采样时在报告中标记异常次数，不随意删掉慢样本。
修复后同时跑性能验证和关键功能回归。自动门禁使用容差带，区分真回退与测量噪声；基线设备、网络或页面内容改变时，重建基线而不是沿用旧阈值。
深度定制
电商首页优先观察首图、价格和购买入口；中后台关注首次可用、大表格滚动和筛选反馈；内嵌页需分离容器启动与页面自身耗时；内容站点关注字体、广告与长文图片；跨地域站点按国家/运营商/设备分层查长尾。
FAQ
一个高分能说明页面快吗？ 不能。分数只对当次场景有意义，需结合采样条件、原始时间线和真实用户分布。
为什么要跑多次？ 网络、调度、后端和设备状态都会带来波动，单次数据难以区分回退和偶然值。
压缩所有图片就是最优先吗？ 不一定。要先确认关键元素和资源发现顺序，非关键图片的微小节省可能对用户无感。
线上慢、本地快怎么办？ 先对齐数据、地域、设备、缓存、第三方脚本和发布配置，再用隔离账号在可控生产路径采样。
反模式与修正
| 反模式 | 修正 |
|---|---|
| 挑一次最好的结果交付 | 多次采样，报中位数和波动范围 |
| 不区分冷启动与热缓存 | 建立两个场景和两套基线 |
| 看到大文件就判定根因 | 检查它是否处于关键路径及其下载时点 |
| 只优化某个指标 | 回到用户任务，同时检查功能与可访问性 |
| 修复后换更快设备复测 | 保持采样契约不变，再做拓展验证 |
按需 references
性能预算与验收 用于设定指标、阈值和发布门禁；时间线根因定位 用于已有时间线、网络记录或卡顿采样时的深入诊断。
