引入JS文件的几种方式详解

本文深入解析了HTML中引入JavaScript文件的多种方法与关键细节，涵盖src路径的正确写法（以HTML文件为基准的相对路径）、常见陷阱（如内联代码在使用src时不执行、file://协议导致的跨域加载失败）、defer与async的本质区别及适用场景（defer按序延迟执行适合DOM操作，async无序立即执行适合独立脚本），以及ES Module的特殊要求（必须声明type="module"、路径需带.js扩展名、模块作用域限制等），强调实际开发中极易被忽视却致命的路径错误和协议限制问题，并给出基于现代最佳实践的推荐方案——优先将带defer的script标签置于head中，兼顾早下载与安全执行。

script 标签的 src 属性必须是有效路径，相对路径以 HTML 文件为基准

浏览器加载 ，结果发现 console.log 完全没执行——这是最常踩的坑。

• 路径错误时，浏览器控制台会报 Failed to load resource: net::ERR_ABORTED 或 404，检查 Network 面板里请求的完整 URL 是否拼错
• 用相对路径（如 ./js/app.js、../lib/utils.js）时，基准是当前 HTML 文件所在目录，不是 JS 文件位置，也不是服务器根目录
• 避免用 file:// 协议直接双击打开 HTML：现代浏览器会因跨域限制拒绝加载本地 src 的 JS，必须起一个本地服务（比如 npx serve 或 VS Code Live Server 插件）

defer 和 async 的行为差异直接影响执行时机和 DOM 可用性

默认情况下， 放在 ，既早下载又晚执行

ES Module 场景下 import 和 script src 共存要注意类型声明

当你用 import 语法（比如 import { init } from './utils.js'），就不能再用普通 引入同一个文件，否则会报 Uncaught SyntaxError: Cannot use import statement outside a module。

• 启用 ES Module 必须显式声明 ，否则浏览器当普通脚本处理
• 模块脚本默认是 defer 行为，不用额外加 defer
• 模块内不能用 var/function 声明全局变量，变量作用域仅限于模块；想暴露给全局要用 window.xxx = xxx
• 模块路径必须带扩展名（如 ./utils.js），不能省略 .js，否则报 404

实际项目里最容易被忽略的，是路径基准和协议限制——本地双击打开 HTML 时一切看似正常，但只要一部署到 Nginx 或 GitHub Pages，路径错半级、漏个点，JS 就静默失效。调试前先看 Network 面板里那个 JS 请求是不是绿色 200。

今天关于《引入JS文件的几种方式详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！