为了不阻塞渲染 把 jQuery 和依赖它的插件都改成了 async 上线后偶发 Uncaught ReferenceError: $ is not defined 刷十次能出现两次 网络慢的时候必现。乍看像缓存或者权限的锅,追下去往往不是。
<script src='/js/lib.js' defer></script> <script src='/js/plugin.js' defer></script>
追下去是这么回事:async 只保证下载不阻塞解析 谁先到谁先执行 插件体量小先跑完 jQuery 还在路上 依赖自然拿不到 网络越慢越容易撞上 重试也不一定复现。
「async 执行顺序」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。
线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。
具体做法是,有依赖关系的脚本统一改 defer 它保证按书写顺序执行;确实要 async 的自己在代码里轮询等依赖 再加超时兜底;别在中间插内联脚本 内联块会把执行时机彻底打乱。
验收就看一点,弱网下刷二十次不再出现 $ 未定义 初始化顺序和书写顺序一致。
