关于MutationObserver回调触发机制及DOMContentLoaded前替换脚本的技术咨询

嗨，我来帮你理清这两个核心问题：

关于MutationObserver回调的触发方式 #

MutationObserver的回调是批量触发的。浏览器出于性能优化的考虑，会把短时间内发生的多个DOM变动合并成一个mutationsList数组，一次性传给回调函数，而不是每插入一个节点就立刻调用一次回调。举个例子，如果页面在极短时间内插入了3个script节点，你的回调只会被调用一次，所有变动的信息都会包含在同一个mutationsList里。

能否在DOMContentLoaded前完成脚本替换？ #

你的Tampermonkey脚本设置了@run-at document-start，这个时机非常早——在页面的初始HTML开始解析之前就已经运行了，所以你的MutationObserver是在DOM构建的最早期就开始监听的，但这里有个关键细节需要注意：

• 对于同步加载的脚本（比如页面里直接编写的不带async/defer属性的<script>标签）：浏览器在解析到这类标签时，会先将节点插入DOM，然后立刻暂停HTML解析去执行脚本。而MutationObserver的回调是异步触发的（属于微任务，会在当前宏任务结束后执行），这意味着当同步脚本被插入DOM后，浏览器会先执行该脚本，再触发你的Observer回调——这样你的node.remove()就来不及阻止它执行了。
• 对于异步/延迟加载的脚本（带async/defer属性，或者通过JS动态插入的脚本）：这类脚本的执行时机不会阻塞DOM解析，你的Observer有足够时间在它们运行前捕捉到节点并完成移除/替换，完全能赶在window.DOMContentLoaded触发前完成操作。

优化建议（确保拦截所有脚本） #

如果你的目标是拦截所有脚本（包括同步脚本）并在DOMContentLoaded前完成替换，仅靠MutationObserver可能不够，可以补充以下方案：

• 在document-start阶段重写document.createElement方法，当检测到创建<script>元素时直接进行拦截处理；
• 调整Observer的监听范围，不仅监听document.head，还要监听document.body甚至document.documentElement，避免漏掉body区域插入的脚本；
• 可以尝试结合document.addEventListener('beforescriptexecute', ...)事件（主流浏览器目前仍支持），它会在脚本执行前直接触发，能更精准地拦截同步脚本的执行。

备注：内容来源于stack exchange，提问作者ng.newbie