脚本放在中调用DOM查询方法会返回null，因DOM树未构建完成；应使用DOMContentLoaded事件、defer属性或移至前解决。
脚本放在
直接在 中写 ，且脚本里调用了 document.getElementById 或 querySelector 等 DOM 查询方法，大概率返回 null。因为此时 HTML 还没解析到对应元素，DOM 树尚未构建完成。
常见错误现象：
Cannot read property 'addEventListener' of nullTypeError: Cannot set property 'innerHTML' of null
解决思路不是“等一会儿”，而是明确执行时机：
- 用
DOMContentLoaded事件包裹操作逻辑 - 给
加defer属性（仅适用于外部脚本） - 把脚本移到
前——最简单、兼容性最好
defer 和 async 的区别到底在哪
两者都让脚本不阻塞 HTML 解析，但执行时机和顺序完全不同：
立即学习“Java免费学习笔记（深入）”；
-
defer：脚本下载与 HTML 解析并行，但**按出现顺序执行，且一定在 DOM 构建完成后、DOMContentLoaded触发前** -
async：脚本下载与 HTML 解析并行，**下载完立刻执行，不保证顺序，也不等 DOM 就绪** → 适合无依赖的分析脚本、埋点代码
注意：defer 只对 有效；内联脚本（没有 src）加了 defer 会被忽略。
典型误用：
- 多个
async脚本之间有依赖（如 jQuery + 插件），结果插件先加载、jQuery 后加载 → 报$ is not defined - 在
defer脚本里访问document.body—— 安全；但在async脚本里访问，大概率报错
现代项目中怎么组织 JS 与 HTML 的关系
实际工程中，不再靠手动放 标签决定执行顺序，而是靠构建工具和模块机制来管理依赖与挂载时机：
- 使用
import显式声明依赖，打包器（如 Vite / Webpack）自动处理执行顺序 - 入口 JS 文件通常只做一件事：等待 DOM 就绪后启动应用，例如：
document.addEventListener('DOMContentLoaded', () => { renderApp(document.getElementById('root')); }); - HTML 中只留一个空容器（如
）和一个带type="module"或defer的脚本标签 - 避免在 HTML 中写内联
onclick="doSomething()"—— 行为与结构耦合，调试困难，无法被 Tree Shaking
移动端或低配设备上容易被忽略的细节
脚本位置影响首屏渲染速度，尤其在弱网或低端 Android 设备上：
- 把大体积 JS 放在
且没加async/defer→ HTML 解析卡住，白屏时间拉长 - 用
DOMContentLoaded但里面做了大量同步计算（如遍历千条 DOM 节点）→ 页面“假死”，用户点击无响应 - 监听
load而非DOMContentLoaded→ 等所有图片、字体加载完才执行，延迟明显
真正关键的是：DOM 就绪 ≠ 页面可用。如果脚本要操作视口内元素，建议结合 IntersectionObserver 懒执行；如果涉及动画，优先用 CSS 动画或 requestAnimationFrame。
脚本位置不是玄学，是加载链路上的一个确定节点。选错地方，后面所有优化都打折扣。
