记录一下那天晚上的排查过程。页面里插了五个第三方脚本,统计、客服、热力图各自加载,移动端 TBT 超过 600 毫秒,输入框点下去要等一下才有光标。

把日志和配置对完,能解释这个现象的基本就这几处。脚本同步加载,直接阻塞了文档解析。另一种情况是客服组件在首屏就初始化,占用了主线程。

另外,多个脚本重复引入同一套工具库。

动手时先统计页面里的第三方域名

curl -s https://www.example.com/ | grep -o 'https://[^/"]*' | sort -u

给非关键脚本加 defer

<script src="stat.js" defer></script>

客服组件改为点击后再加载

document.querySelector('#chat').addEventListener('click', loadChat);

隔了一天再看,现象没变,说明不是偶发。

那几天正好在做别的变更,先把时间线对齐才敢动手。

怎么算真的好了,看的是同一批现象。主线程阻塞时间明显下降,输入和点击恢复即时响应。

defer 只保证顺序,不减少下载量,真正省时间的是延后初始化,把交互类组件放到第一次点击时再加载。拖得越久,排查成本越高,因为现场状态会被后续操作覆盖。

作者 9823189