性能 · 排查路径

页面性能问题的证据化排查

性能排查从瀑布图、火焰图和 Core Web Vitals 指标开始,再锁定需要处理的具体瓶颈。

排查步骤

查看、判断、复查

  1. 01

    在可重复的设备、网络和页面状态下收集性能记录,记录 LCP、INP、CLS 与测试条件。

  2. 02

    分析瀑布图:识别阻塞渲染的资源(同步脚本、未优化的字体、大的 CSS),检查资源加载优先级。

  3. 03

    审查主线程火焰图中的长任务、同步布局和主要 JavaScript 工作,结合用户可感知的交互判断优先级。

  4. 04

    建立性能预算(体积、请求数、关键路径时间),持续在 CI 中监控,防止退化。

跟着示例核对

示例内容用于说明方法,非本站探测记录。复核于 2026-10-03。

模拟实验条件:桌面、固定节流、冷缓存、同一版本,非线上用户数据
重复三次:LCP 3.8 / 3.6 / 3.7 秒
瀑布:首屏图片请求在 1.9 秒才开始,正文 HTML 在 0.4 秒到达
交互:点击筛选时出现 420 ms 主线程任务
改后对照:LCP 2.9 / 2.8 / 2.9 秒;真实 INP 分布未知

怎样解释结果

这一实验样本支持先核对首屏图片发现时机,并检查交互长任务。实验结果改善只针对这组条件;单个任务时长不等于 INP,三次 LCP 也不能证明真实用户 Core Web Vitals 达标。

不符合预期时

先检查瀑布、LCP 元素与主线程时间线,再一次只改变一个条件。若测试设备、缓存或版本不同,停止因果推断;关键交互或布局退化时回退,而不是只看总分。

修改后复查

按相同条件重复采样并记录范围,同时核对加载、交互、布局及功能。真实访问指标需足够的授权数据,并按移动/桌面等范围观察第 75 百分位;缺少数据时保留未知。

核对外部依赖是否阻塞核心任务 →