JS文件实际加载顺序与代码定义不符，致jQuery加载过晚报错

这种情况我踩过好几次坑，混合本地存储JS和CDN资源时确实容易出现加载/执行顺序紊乱的问题，尤其是jQuery作为基础依赖时，一旦加载滞后就会触发$ is not defined这类经典报错。下面是我总结的排查方向和解决方案：

一、先查最可能的元凶：脚本标签的异步属性 #

浏览器默认会严格按照<script>标签在DOM中的顺序阻塞式加载执行——也就是加载并执行完前一个脚本，才会处理下一个。如果出现实际执行顺序和声明顺序不符，90%的概率是脚本标签加了async或defer属性：

• async：脚本下载完成后立即执行，完全不遵循标签顺序，谁先下载完谁先跑，绝对不能给jQuery用这个
• defer：脚本下载完成后等待DOM解析完毕再执行，会遵循标签顺序，但如果你的依赖脚本是内联的，可能会提前执行

解决步骤：

• 扫一遍所有<script>标签，确保依赖jQuery的脚本没有加async属性
• 如果必须做异步加载优化（比如提升首屏速度），给所有依赖脚本（包括jQuery）都加上defer属性，这样浏览器会按标签顺序执行所有带defer的脚本
• 重点检查：有没有给jQuery的<script>标签误加async，这是最常见的翻车原因

二、统一资源加载策略，减少混合加载的不确定性 #

混合本地和CDN资源时，不同资源的加载速度差异（比如CDN资源通常比本地服务器资源加载更快）会让浏览器的预加载机制出现“视觉上的顺序错乱”——虽然Network面板显示某些CDN资源先下载完成，但浏览器还是会按标签顺序执行脚本。但如果本地jQuery文件加载速度过慢（比如服务器响应延迟），就会导致后续依赖脚本等待时间过长，甚至出现超时报错。

优化建议：

• 优先用CDN加载jQuery：CDN资源有更好的缓存策略和全球节点，能大幅降低加载延迟，减少本地文件拖后腿的情况
• 如果必须混用本地和CDN资源，把所有基础依赖（比如jQuery）放在最前面，并且在Network面板查看本地jQuery文件的加载耗时，如果超过200ms，建议换成CDN或者优化本地服务器的静态资源服务
• 尽量不要在<script>标签之间插入过多复杂DOM元素，浏览器的预加载扫描可能会被干扰，导致加载顺序异常

三、强制确保jQuery加载完成后再执行依赖脚本 #

如果上述方法都没用，可以手动控制脚本执行顺序，彻底避免顺序问题：

• 方法1：把所有依赖jQuery的代码放在jQuery的ready回调里（最稳妥的传统方式）：

$(document).ready(function() {
  // 所有依赖jQuery的逻辑都写在这里
});

• 方法2：动态加载jQuery并在加载完成后执行后续脚本（适合需要灵活控制加载顺序的场景）：

function loadScript(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  script.onload = callback;
  document.head.appendChild(script);
}

// 先加载jQuery，加载完成后再加载依赖脚本
loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', function() {
  loadScript('path/to/your/dependent-script.js');
});

四、别被Network面板的“加载顺序”误导 #

注意：Network面板里的“启动顺序”是资源开始下载的时间，“完成顺序”是下载完成的时间，但执行顺序还是严格按照<script>标签的顺序。如果你的报错是$ is not defined，那大概率是执行顺序确实反了，而不是下载顺序的问题——这时候一定要回到脚本标签的属性排查，别在下载顺序上浪费时间。

内容的提问来源于stack exchange，提问作者lovemyjob