navigator.sendBeacon('/stat/collect',
new Blob([JSON.stringify(payload)],
{ type: 'application/json' }));
页面首屏 1.1 秒就画完了,Performance 面板里 onload 却是 6.3 秒,长任务列表里统计接口的请求占了 4.2 秒。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:统计脚本用同步请求在 window.onload 前上报,接口慢的时候主线程一直等。上报失败还会重试三次,每次都串行。
「统计接口阻塞 onload」确认了原因之后,改动尽量只碰那一处,顺手改的东西后面最容易出问题。同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。
把这次用到的命令存进笔记,比记住结论有用,换个环境还能照着走。改完隔一天再看一次,当场正常不代表能稳住。
测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。
处理上按这个顺序:改成 navigator.sendBeacon 或 fetch 加 keepalive,别阻塞加载;上报逻辑放到 load 之后,用 requestIdleCallback 包一层;接口加 800 毫秒超时,失败直接丢弃不重试;把统计域名单独走一个不占连接的子域。
确认没问题再收工,onload 回到 1.4 秒以内,统计请求在 Network 面板里不再阻塞主线程。
