首页 head 里引了六个 script 没有 defer 也没有 async 瀑布图里 HTML 下载完 2.9 秒后才开始渲染 白屏时长正好等于末尾那个脚本的下载时间。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,普通 script 会停下 HTML 解析 等它下载并执行完才继续 而 async 下载不阻塞但执行时机不可控 defer 同样是异步下载 却能保证按顺序在解析完之后跑。
「defer 与 async」这类改动最怕改一半,回滚脚本先准备好,再动生产。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。
curl -s https://example.com | grep -o '<script[^>]*>' # 逐个确认是否带 defer 或 async
权限不要一口气开到最大,先加到够用再往上试,范围小才好收。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。
具体做法是,有 DOM 依赖和顺序要求的脚本加 defer 保持原有的执行次序;统计和客服这类独立脚本加 async 不要让它拖住首屏渲染;确实要同步执行的只留一个 其余的挪到页面底部再加载。
最后用这个标准收尾,HTML 解析不再被脚本卡住 首屏渲染提前到 1 秒内 脚本功能都正常。
