引入JS的正确方法详解

本文深入剖析了HTML中引用JavaScript的五大核心陷阱与最佳实践：从script标签位置不当导致DOM未就绪的常见报错，到路径错误、模块化声明缺失、动态加载时序失控，再到多方式混用引发的隐性冲突，系统揭示了JS加载失败的真正根源往往不在代码逻辑本身，而在于加载策略的误用；通过明确区分defer/async适用场景、规范路径书写、强制module类型声明、规避CORS限制及合理使用import()等关键方案，帮助开发者彻底避开90%以上的脚本加载问题，让页面既快又稳。

script 标签放哪最容易出错

绝大多数页面加载失败、undefined 报错，根源不在 JS 写得对不对，而在 才对，不是 ./js/main.js（. 在这里无意义）

模块化脚本必须加 type="module"

只要用了 import 或 export，就必须声明 type="module"，否则浏览器当普通脚本处理，直接报 Unexpected token 'export' 或 Cannot use import statement outside a module。

注意点：

• type="module" 脚本默认是 defer 行为，不用额外加
• 模块内 import 的路径必须带扩展名（.js），不能省略：import { foo } from './utils.js' ✅，import { foo } from './utils' ❌（ESM 规范要求）
• 模块脚本的 this 是 undefined，不是 window，别在模块顶层写 this.xxx = yyy
• 本地文件协议（file://）下，模块导入会因 CORS 被拒，必须走本地服务（npx serve 或 vite preview）

动态加载 script 的兼容性坑

用 document.createElement('script') + appendChild 加载脚本看似灵活，但容易掉进执行时序和错误捕获的坑里。

关键细节：

• script.onload 只在成功加载并执行后触发；script.onerror 必须在 src 设置**之后**立即绑定，否则可能错过错误（事件触发早于监听器注册）
• 动态插入的模块脚本（type="module"）无法通过 onload 判断是否全部依赖加载完成，要用 import() 动态导入替代
• 多个动态脚本之间没有执行顺序保证，除非手动链式调用或用 Promise.all 包裹 import()
• IE11 不支持 script.onload，得降级用 script.onreadystatechange 判断 readyState

真正麻烦的不是怎么写，而是不同加载方式混用时的隐性冲突——比如一个页面既有 defer 脚本，又有动态插入的模块，还有内联 DOMContentLoaded 监听器，它们的执行顺序、作用域隔离、错误传播路径全都不一样。上线前最好用 Lighthouse 的 “Avoids render-blocking resources” 和 “Properly size images” 之外的 JS 加载诊断项过一遍。

今天关于《引入JS的正确方法详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！