script标签引入js需谨慎：内嵌脚本放head会阻塞渲染；外链默认同步阻塞，defer异步下载后按序执行，async下载完立即执行；行内事件有作用域、复用和xss风险；动态创建script仍可能阻塞；路径错误仅静默失败。
script 标签是 HTML 中引入 JavaScript 的唯一标准载体，但怎么用、放哪、加不加属性，直接决定脚本是否执行、何时执行、会不会阻塞页面——不是写了 script 就算引入成功。
内嵌 JS 放 head 里会阻塞渲染
把 script 写在 里（没 src），浏览器解析到它就会暂停 HTML 构建，先下载、解析、执行完 JS 才继续。这意味着：用户可能看到白屏几秒，尤其当里面调了 alert() 或复杂计算时。
- 除非逻辑极轻（比如设置
document.documentElement.classList）、且必须在 DOM 构建前运行，否则别这么干 -
document.write()在这种场景下会清空整个文档，现在基本等同于禁用 - 想调试？控制台报错位置指向
某行，但实际是整块脚本被当做一个“匿名模块”处理，堆栈不友好
外链 JS 不加 defer 或 async 默认同步加载
写成 <script src="app.js"></script>，浏览器默认按“同步阻塞”方式处理：发起请求 → 等 JS 下载并执行完 → 才继续解析后续 HTML。哪怕 JS 文件只有 1KB，也会卡住 DOM 构建。
-
defer：异步下载 + 等 HTML 解析完再执行，按书写顺序执行，适合操作 DOM 的初始化逻辑（如DOMContentLoaded前要做的事） -
async：异步下载 + 下载完立刻执行，不保证顺序，适合独立工具类（如统计脚本、埋点 SDK） - 两个属性互斥；同时写只会以
async为准 - IE9 及以下不支持
defer/async，但这类环境现在基本可忽略
行内事件处理器（onclick 等）本质是字符串 eval
<button onclick="doSomething()"></button> 看似简单，但浏览器内部会把引号里的内容当作字符串传给 new Function() 执行——这带来三个硬伤：
- 作用域受限：只能访问全局变量和
event、this，闭包、模块变量全不可见 - 无法复用：相同逻辑在多个按钮上写三遍，改一处就得改三处
- XSS 风险：如果
onclick值来自用户输入（比如后端拼接），极易触发脚本注入，innerHTML = '<button onclick="' + userInput + '">'</button>是典型危险模式
动态创建 script 标签要注意执行时机
用 document.createElement('script') + appendChild() 加载外部 JS，看似灵活，但默认仍是同步行为：插入即触发下载，下载完立刻执行（类似没加 defer 的外链）。
- 想让它延迟执行，得手动监听
load事件，再调用逻辑，否则仍可能抢在 DOM 就绪前运行 - 重复插入同个
src的script标签，浏览器不会二次下载，但会再次执行（注意副作用） - 现代项目更倾向用
import()动态导入 ES 模块，而不是手动操作script标签
Failed to load resource: net::ERR_ABORTED，但如果你没打开 Network 面板，就以为“JS 没生效”，其实是 src 路径 404 了。Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
