js加载失败常见于路径错误、执行时机不当、模块未声明type="module"或动态导入不规范；应优先用绝对路径、合理使用defer/async、显式声明模块类型、采用import()动态加载。
用 <script src="..."></script> 最直接，但路径错了就静默失败
浏览器不会报错，只是不执行 JS，你刷新页面、打开控制台也看不到明显提示。常见原因是路径写成相对路径却没注意当前 HTML 所在目录层级——比如 index.html 在 /pages/ 下，而你写 src="js/main.js"，实际会去找 /pages/js/main.js，不是项目根目录下的 /js/main.js。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用以
/开头的绝对路径（从域名根开始），比如src="/js/main.js"，避免层级混乱 - 开发时打开浏览器开发者工具的 Network 标签页，过滤
JS，看该文件是否返回 200；如果显示 404，点开看 Request URL 是什么，立刻反推路径问题 - 不要在
src里拼接变量或用内联 JS 拼路径（如src="js/.js"），除非你明确在服务端做了渲染
defer 和 async 不是可有可无的属性，影响执行时机和依赖顺序
默认情况下，<script src="..."></script> 是同步阻塞的：HTML 解析停住，等 JS 下载、编译、执行完才继续。这对首屏渲染很不友好，也容易因执行太早导致 document.getElementById 找不到元素。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如果脚本不操作 DOM 或依赖其他 JS，加
async：下载不阻塞 HTML，完成后立即执行（执行时机不可控） - 如果脚本要操作 DOM 且依赖 HTML 结构（比如初始化按钮点击事件），加
defer：下载不阻塞 HTML，但等到 DOM 解析完成、DOMContentLoaded触发前按顺序执行 - 多个
defer脚本会保持书写顺序执行；多个async脚本谁先下完谁先执行，顺序不确定 - 不要给内联脚本（即没有
src的<script>...</script>）加defer或async，它们会被忽略
模块化脚本必须显式声明 type="module"
用 import / export 的 JS 文件，哪怕只有一行 import { foo } from './utils.js';，也不能直接用普通 <script src="main.js"></script> 引入，否则控制台报错：Uncaught SyntaxError: Cannot use import statement outside a module。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 引入模块脚本必须写成：
<script type="module" src="/js/main.js"></script> -
type="module"脚本天然具有defer行为，不用额外加 - 模块路径必须带扩展名（如
./utils.js），不能省略为./utils，否则报 404 - 模块脚本中的相对路径，是以该 JS 文件自身位置为基准，不是 HTML 页面位置
动态加载要用 import()，别再手写 document.createElement('script')
需要运行时决定加载哪个 JS（比如按用户操作、设备类型或权限动态引入），传统做法是创建 script 元素并设 src，但手动管理加载状态、错误回调、重复加载很麻烦。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 现代浏览器支持动态
import()：它返回 Promise，可await，天然支持错误捕获 - 示例：
const module = await import('/js/analytics.js');，之后可调用module.init() - 动态
import()的路径可以是表达式，但不能是纯变量（如import(varName)不合法），需确保是静态可分析的字符串模板 - 注意：动态导入的模块也是模块作用域，不会污染全局，也不自动执行顶层代码以外的逻辑，得手动调用导出函数
type="module" 容易漏写，而错误信息又藏得深，多看 Network 和 Console 里的第一个红色报错行。 
