动态插入脚本的执行时机？AJAX场景下的技术疑问

针对你的问题，直接给结论：你通过insertScript动态插入到<head>的内联脚本，会在它被添加到DOM的那一刻立即执行，而且如果此时浏览器还在解析DOM（比如已经走到<body>部分），DOM解析会被暂停，优先执行这个脚本，执行完成后才会继续解析剩余的DOM内容——完全符合你“尽快执行”的需求。

分场景详细说明 #

• 场景1：AJAX请求在DOM解析完成前返回
  假设浏览器还在解析<body>里的内容，你的AJAX请求刚好拿到结果并调用了insertScript。这时候脚本被追加到<head>后，浏览器会立刻暂停当前的DOM解析流程，同步执行这个内联脚本里的console.log代码，等脚本执行完，才会回到<body>继续解析剩下的HTML标签。

• 场景2：AJAX请求在DOM解析完成后返回
  如果AJAX请求比较慢，等浏览器已经把整个DOM都解析完了（触发DOMContentLoaded事件之后）才返回结果，那脚本插入后还是会立即执行，只不过这时候已经没有正在进行的DOM解析流程了，自然不会有“暂停解析”的情况，但依然是最快速度执行。

补充细节 #

你这里是内联脚本，所以没有网络下载的步骤，添加到DOM后直接执行。如果是动态插入外部脚本（比如设置script.src），浏览器会先异步下载脚本文件，下载完成后立刻执行，同样会阻塞当前的DOM解析（除非你给脚本设置async或defer属性，但动态创建的脚本默认不带这些属性）。

结合你的代码来看，insertScript创建内联脚本节点并追加到<head>的操作完成瞬间，脚本就会执行，完全满足你“尽快执行”的要求，不用担心里程碑渲染完成后才执行的问题。

内容的提问来源于stack exchange，提问作者Beppe