当通过 document.write 等方式在脚本执行过程中动态插入非模块化、无 src 的 标签时，HTML 解析器会绕过常规队列，立即同步执行该新脚本——即使已有其他脚本正在运行，从而形成“脚本中断另一脚本”的行为。
当通过 `document.write` 等方式在脚本执行过程中动态插入非模块化、无 `src` 的 `<script>` 标签时，<a style="color:#f60; text-decoration:underline;" title= "html"href="https://m.php.cn/zt/15763.html" target="_blank">html 解析器会绕过常规队列，**立即同步执行该新脚本**——即使已有其他脚本正在运行，从而形成“脚本中断另一脚本”的行为。</script>
在 WHATWG HTML 规范中，“Prepare the script element”算法明确指出：
Otherwise, immediately execute the script element
el, even if other scripts are already executing.
这一特殊行为并非指 JavaScript 引擎层面的“抢占式中断”（如多线程抢占），而是 HTML 解析器在文档写入（document write）阶段的同步重入机制——它本质上是解析器在处理 document.write 输出的 HTML 字符串时，实时触发词法分析与脚本执行，不等待当前 JS 执行栈清空。
✅ 触发条件（三者必须同时满足）
- 脚本为 内联脚本（即无
src属性）； - 脚本类型为 经典脚本（non-module）（即未声明
type="module"）； - 该
<script></script>元素是 在另一个脚本执行期间，通过document.write动态注入（注意：innerHTML、appendChild等 DOM 操作不触发此行为，它们仅将脚本加入异步执行队列）。
? 实际示例与执行顺序
<script>
console.log("1. outer start");
document.write(`
<script>
console.log("2. nested script runs IMMEDIATELY");
console.log("3. still in nested script");
<\/script>
`);
console.log("4. outer continues — this runs AFTER nested finishes");
</script>
✅ 控制台输出严格按序：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
1. outer start 2. nested script runs IMMEDIATELY 3. still in nested script 4. outer continues — this runs AFTER nested finishes
⚠️ 注意： 中的反斜杠是必需的，用于避免 HTML 解析器提前关闭外层 <script></script> 标签（否则会导致语法错误或截断）。
⚠️ 重要限制与现代实践警示
- ❌
document.write在页面加载完成后调用会清空整个文档，因此该机制仅在初始解析阶段有效（即DOMContentLoaded之前，且文档仍处于“open”状态）； - ❌
fetch()+innerHTML插入<script></script>、或insertAdjacentHTML('beforeend', '<script>...')</script>均不会触发立即执行，其脚本会被排队至事件循环中（等同于async=false的常规插入）； - ❌ ES 模块（
<script type="module"></script>）和带src的外部脚本永远不适用此规则，它们始终遵循异步加载/执行流程； - ? 该行为已被现代 Web 开发视为反模式：
document.write在多数现代浏览器中已被禁用（尤其在Content-Security-Policy: script-src 'unsafe-inline'缺失时），且在XMLHttpRequest或fetch场景下完全不可用。
✅ 替代方案（推荐）
若需在运行时动态执行脚本逻辑，请使用安全可控的方式：
// 安全执行字符串代码（仅限可信上下文）
const script = document.createElement('script');
script.textContent = 'console.log("dynamically injected");';
document.head.appendChild(script); // → 异步执行，不中断当前栈
// 或更推荐：封装为函数并直接调用
function dynamicLogic() {
console.log("executed inline, no parser involvement");
}
dynamicLogic();
? 总结
“一个脚本中断另一个脚本”并非 JavaScript 运行时的并发控制，而是 HTML 解析器在 document.write 场景下的同步解析重入特性。它体现了 HTML 与 JS 执行模型深度耦合的历史设计，虽仍在规范中保留，但因可维护性差、安全性低、与现代异步架构冲突，应严格避免在生产环境中使用。理解它，是为了更好规避陷阱，而非主动采用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
