记录一下那天晚上的排查过程。移动端 INP 显示 320 毫秒,用户点导航要等半秒才有反应。页面加载并不慢,问题集中在点击之后的处理逻辑上。
原因不止一个,得分开看。点击事件里同步执行了统计上报请求。少数情况下是第三方脚本在主线程上做了大量计算。
还有一种情况,事件监听没有做防抖,一次点击触发多次。
先统计首屏脚本的数量
curl -s https://www.example.com/ | grep -o '<script' | wc -l
然后把统计请求改成空闲时发送
requestIdleCallback(() => send(evt));
等前面都确认过,再确认首屏第三方域名的数量
curl -s https://www.example.com/ | grep -c 'https://'
这台环境是别人交接的,不少默认值被动过,只能一项项核。
改完先别撤,确认这几项。点击后的响应时间降到 200 毫秒以内,交互不再有明显卡顿。
这里还有个坑。INP 取的是最差的一次交互,平均值好看不代表没问题,排查时要看第九十五百分位而不是平均数。线上能稳定复现的问题都不算难,难的是只在大流量下才出现的那种。