Chrome未加载完vendor.js即执行master.js导致页面失效的问题

正常情况下，不带async/defer属性的脚本，浏览器会严格按照它们在DOM中的顺序执行——哪怕第二个脚本先加载完成，也必须等前一个脚本加载并执行完毕后，才会启动执行。你遇到的Chrome乱序执行问题，大概率是以下几种特殊情况导致的：

• vendor.js的MIME类型不合法：如果服务器返回vendor.js的Content-Type不是text/javascript或application/javascript这类标准JS类型，Chrome会判定它是无效脚本，直接跳过执行，转而运行后面的master.js。这时候你看到的“vendor未加载完就执行master”，实际是vendor已经加载但不被执行。
• vendor.js加载失败：开启网络节流时，vendor.js容易出现请求超时或加载失败的情况，浏览器不会因为前一个脚本加载失败就终止后续流程，master.js会正常执行，自然就会因为依赖缺失报错。
• 脚本标签被动态篡改：页面中如果有其他代码偷偷给这两个脚本标签添加了async属性，会打破原本的顺序执行规则，导致脚本按加载完成顺序执行。
• Chrome特殊场景下的执行bug：虽然概率不高，但某些Chrome版本在网络节流这类极限场景中，可能存在预加载与执行顺序的异常优化。

针对这些情况，你可以尝试以下解决方案：

1. 检查服务器响应配置：确认vendor.js的HTTP响应头中，Content-Type是合法的JS类型，比如text/javascript。
2. 添加defer属性：给两个脚本都加上defer，它们会并行加载，同时严格按照DOM顺序执行，既不阻塞页面解析，又能保证依赖顺序：

   <script src="vendor.js" defer></script>
   <script src="master.js" defer></script>
   

3. 合并脚本文件：把vendor.js和master.js合并成一个文件，从根源上消除顺序问题。
4. 手动控制加载流程：如果必须分开加载，可以通过onload事件确保vendor加载完成后再加载master：

   <script src="vendor.js" onload="(()=>{const s=document.createElement('script');s.src='master.js';document.body.appendChild(s)})()"></script>
   

5. 排查加载失败问题：在Chrome DevTools的Network面板中查看vendor.js的请求状态，确认是否存在超时、404等加载失败情况，针对性优化网络或服务器配置。

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