script 标签应默认放在前，确保dom就绪且不阻塞渲染；必须放时用defer，独立脚本可用async；路径以html所在目录为基准；type=”module”启用严格模式并隔离作用域。
script 标签放哪？位置决定执行时机和变量可见性
HTML 中引入 js，最核心的问题不是“能不能连上”，而是“什么时候执行、能访问到什么”。<script></script> 放在 里，JS 会立即下载并执行，但此时 DOM 还没解析完，document.getElementById 很可能返回 NULL；放在 底部，DOM 已就绪，但页面渲染可能被阻塞。
- 推荐默认放
前：确保 DOM 可操作，且不阻塞首屏渲染 - 必须放
时，加defer属性：<script defer src="main.js"></script>，它会并行下载、等 DOM 解析完再执行 - 用
async仅适用于完全独立的脚本（如统计代码），它下载完立刻执行，不保证顺序，也不等 DOM - 避免在
写内联脚本并直接操作document.body—— 此时body还不存在
相对路径写错是 404 的头号原因
浏览器加载 JS 是按当前 HTML 文件所在路径为基准解析相对路径的，不是按 JS 文件位置，也不是按服务器根目录。常见错误是把 js/main.js 写成 ./js/main.js 或 /js/main.js 却没搞清当前 HTML 在哪级目录。
- 检查 Network 面板里 JS 请求的 URL 和状态码：
404就说明路径错了 -
src="js/main.js"表示“和当前 HTML 同目录下的 js 文件夹里的 main.js” -
src="/js/main.js"表示“网站根目录下的 js 文件夹”，跟 HTML 所在路径无关 - 本地双击打开 HTML（
file://协议）时，/会指向文件系统根，极易出错，务必用开发服务器（如python3 -m http.server）测试
type=”module” 改变加载规则，不兼容老写法
启用 ES 模块后，script 默认变成严格模式、自动延迟执行、支持 import/export，但也会禁用全局变量自动挂载到 window，且路径必须带扩展名、必须是相对或绝对 URL。
- 写
<script type="module" src="app.js"></script>后，app.js里的const foo = 1不会变成window.foo - 模块内
import路径不能省略扩展名：import { util } from './utils.js'✅，import { util } from './utils'❌ - 模块脚本不支持
document.write，用了会直接报错 - 想让传统脚本和模块共存？模块里用
export，传统脚本里用import()动态导入，别混用var全局声明
内联 script 与外部文件的变量隔离问题
很多人以为在 HTML 里写两段 <script></script>，后一段能直接用前一段定义的变量，这在非模块环境下成立；但一旦其中一个是 type="module"，或者用了 defer/async，执行顺序和作用域就不可靠了。
立即学习“前端免费学习笔记（深入）”；
- 两个普通
<script></script>标签顺序执行，变量可共享：<script>let x = 1</script><script>console.log(x)</script>✅ - 一个加了
defer，另一个没加：不加的先执行，x还没定义就报ReferenceError - 一个用
type="module"，另一个不用：模块有自己顶层作用域，let x = 1不会泄露给非模块脚本 - 调试时发现变量“突然不见了”，先看控制台报的是
ReferenceError还是undefined—— 前者是没声明，后者是声明了但没赋值或作用域不对
事情说清了就结束。路径、时机、模块化、作用域，这四点卡住绝大多数连接问题，其他都是它们的组合变形。