内联脚本应置于</body>前以确保DOM就绪；避免document.write()；禁止</script>出现在字符串中；defer按序执行，async立即执行且无序；动态插入脚本需手动监听DOMContentLoaded；行内事件处理器存在安全与维护隐患。
直接在 HTML 模板里写 <script> 不等于“嵌套成功”——脚本是否执行、何时执行、能否访问 DOM，全取决于你放哪、加没加属性、有没有和模板逻辑冲突。
内联脚本放 <body> 底部最省心
浏览器解析 HTML 是从上到下流式进行的。如果把 <script> 放在 <head> 里又没加 defer，它会立刻阻塞 DOM 构建，等 JS 执行完才继续渲染，用户看到白屏是常态。
- 操作 DOM 的代码（比如
document.getElementById或querySelector）必须确保目标元素已存在，</body>前是最稳妥的位置 - 避免用
document.write()—— 它会清空整个文档，现代页面基本等同于禁用 - 内联脚本里不能出现
</script>字符串，哪怕在字符串字面量里也不行（如""），否则会被提前闭合；需写成""或用模板字符串绕开
defer 和 async 别混用，选错就拿不到 DOM
外链脚本（<script src="app.js"></script>）默认是同步阻塞行为：下载 → 解析 → 执行 → 继续解析 HTML。这对首屏性能杀伤极大。
-
defer：异步下载 + 等 HTML 解析完、DOM 构建完成后再按顺序执行，适合初始化逻辑（如绑定事件、填充数据） -
async：异步下载 + 下载完立刻执行，不保证顺序，适合完全独立的脚本（如统计 SDK、广告加载器） - 两个属性互斥；同时写，浏览器只认
async - IE9 及以下不支持这两个属性，但当前已可忽略
模板中动态插入 JS 要防重复执行和时机错乱
用 JavaScript 动态创建 <script> 标签（比如根据条件加载不同模块），看似灵活，但默认仍是同步执行模型：
立即学习“前端免费学习笔记（深入）”；
-
document.createElement('script')+appendChild()插入后，浏览器立即发起请求并执行，不等 DOM 就绪 - 想延迟到 DOM 就绪后运行，得手动监听
load事件，再调用逻辑，或包装进DOMContentLoaded回调 - 重复插入同一
src的<script>，浏览器不会重发请求，但会再次执行脚本内容——注意副作用（如重复绑定事件、重复初始化状态） - 动态脚本无法被
defer或async属性控制，这些属性只对静态 HTML 中的<script>生效
行内事件处理器（onclick 等）不是“嵌套”，是隐患源头
写 <button onclick="doSomething()"> 看似简单，但它本质是把字符串传给 new Function() 执行，作用域、复用性、安全性全受限。
- 只能访问全局变量和
event、this，闭包、模块导入的函数都不可见 - 逻辑分散在多个标签里，改一处要改多处，维护成本爆炸
- 若值来自用户输入（如后端拼接 HTML），极易触发 XSS：
innerHTML = '<button onclick="' + userInput + '">'是典型高危模式 - 现代框架（React/Vue）早已弃用这类写法，纯 HTML 模板也应优先用事件委托 + 外部脚本管理
真正难的不是“怎么写 <script>”，而是判断“这个脚本该不该现在执行、能不能访问到我要的节点、会不会被其他脚本覆盖或干扰”。多数 DOM 操作失败、白屏、报错 undefined，根源都在加载时机和作用域这两关没过。
