设置async=false的动态脚本仍晚于DOM加载，如何使其优先于DOMContentLoaded加载？

问题原因 #

你遇到的核心问题是：通过createElement动态创建的脚本，即使设置了async=false，也不会像静态<script>标签那样阻塞DOM解析，DOMContentLoaded事件的触发不会等待这类脚本加载完成。

这是因为HTML解析器只会处理直接写在HTML源码中的<script>标签，遇到时会暂停DOM解析、优先加载执行脚本；而JS动态插入的脚本属于运行时操作，不会触发HTML解析器的阻塞逻辑，因此DOM会继续解析直到完成，触发DOMContentLoaded，之后动态脚本才可能加载完成。

解决方案 #

方案1：使用document.write插入脚本（严格保证顺序）

通过document.write直接将脚本标签写入HTML流中，浏览器会像处理静态脚本一样，暂停DOM解析并优先加载执行该脚本，确保它在DOMContentLoaded之前完成加载。

修改后的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script type="text/javascript">
        // 用document.write插入脚本，模拟静态脚本的阻塞行为
        document.write('<script src="JavaScript.js" onload="alert(\'script loaded\');"><\/script>');

        document.addEventListener('DOMContentLoaded', (event) => {
            alert("dom load");
            TestFunction();
        });
    </script>

    <div>Test Html Page</div>
</body>
</html>

此方案会严格按照你预期的顺序触发：script loaded → dom load → TestFunction called。

方案2：绑定脚本加载事件与DOM状态（非阻塞兼容方案）

如果不想使用document.write（它在文档加载完成后调用会清空页面，有副作用），可以调整逻辑，在脚本加载完成后根据DOM状态决定何时调用函数，确保函数不会因未定义报错。

修改后的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script type="text/javascript">
        (function (n, t, a, e, co) {
            var r = t.createElement("script");
            r.async = false;
            r.onload = function () {
                alert("script loaded");
                // 检查DOM是否已加载完成
                if (document.readyState === 'interactive' || document.readyState === 'complete') {
                    executeTestFunction();
                } else {
                    // 未加载则等待DOMContentLoaded
                    document.addEventListener('DOMContentLoaded', executeTestFunction);
                }
            };
            r.src = a;
            var c = t.getElementsByTagName("script")[0];
            c.parentNode.insertBefore(r, c);
        })(window, document, "JavaScript.js");

        function executeTestFunction() {
            alert("dom load");
            TestFunction();
        }
    </script>

    <div>Test Html Page</div>
</body>
</html>

此方案不会阻塞DOM解析，若脚本加载快于DOM解析，顺序符合预期；若脚本加载较慢，会先触发dom load，再触发script loaded，最后调用TestFunction，但能保证函数始终被正确执行。

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