Javascript 同步加载脚本，第一个使用；src"；，第二个是内联脚本_Javascript_Html_Performance_Browser

Javascript 同步加载脚本，第一个使用；src"；，第二个是内联脚本

javascript html performance browser

Javascript 同步加载脚本，第一个使用；src"；，第二个是内联脚本,javascript,html,performance,browser,Javascript,Html,Performance,Browser,我有以下HTML文件： <html> <body> <script> const first = document.createElement("script"); first.setAttribute("src", "./remote.js"); first.async = false; const second = document.createElement("script"); second.appendChild(document.createTe

我有以下HTML文件：

<html>
<body>
<script>
const first = document.createElement("script");
first.setAttribute("src", "./remote.js");
first.async = false;

const second = document.createElement("script");
second.appendChild(document.createTextNode(`console.log("second");`));

document.body.appendChild(first);
document.body.appendChild(second);

</script>
</body>
</html>

控制台输出为

second
first

我希望第一个脚本在第二个脚本之前完成。

这是对复杂得多的代码的简化，对于这些代码，性能至关重要。因此，虽然我知道我可以使用

document.write

，或者先注册到

。onload

，然后再附加第二个脚本。两者都有我想要避免的性能问题

对于其他可能有类似问题的人，我找到了一个不错的解决方案，使用。其思想是使用

src

属性来设置脚本的内容。浏览器将其视为url，因此行为是一致的

线路

second.appendChild(document.createTextNode(`console.log("second");`));

应该是

second.setAttribute("src","data:text/javascript,"+`console.log("second");`)

您认为

first.onload的问题是什么？特别是如果它不是一个外部脚本，而是一些在脚本加载后要执行的代码，那么如果您只想让脚本运行，这没有什么错。但是，尽早将脚本添加到DOM允许脚本流线程更早地解析脚本。看到了吗，但是你不想运行另一个必须在remote.js之后加载的脚本，你有内联代码吗？我不确定我是否理解这个问题；目标是在不改变加载顺序的情况下以最佳性能加载脚本。所以，第一个脚本需要首先运行，第二个脚本应该在第一个脚本完成后立即运行。我是说，您没有第二个脚本要加载。您有一个内联脚本，用于加载远程脚本，并包含在远程脚本完成时应该运行的代码。没有充分的理由为此创建第三个元素。
second.setAttribute("src","data:text/javascript,"+`console.log("second");`)