同步加载脚本，第一个使用“src”，第二个是内联脚本答案

【问题标题】：Loading scripts synchronously, the first uses "src", the second is an inline script同步加载脚本，第一个使用“src”，第二个是内联脚本
【发布时间】：2017-12-14 09:28:53
【问题描述】：

我有以下 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>

remote.js的内容是

console.log("first");

控制台输出是

second
first

我希望在第二个脚本之前完成第一个脚本。这是对更复杂的代码的简化，性能对其至关重要。因此，虽然我知道我可以使用document.write，或者注册到first.onload，然后才附加第二个脚本。两者都有我想避免的性能问题。

【问题讨论】：

您认为first.onload 的问题是什么？特别是如果它不是外部脚本，而是您想要在脚本加载后执行的一些代码？
如果您只是想让脚本运行，那没有什么问题。但是，尽早将脚本添加到 DOM 允许脚本流线程更早地解析脚本。见blog.chromium.org/2015/03/…
但是您不想运行另一个必须在 remote.js 之后加载的脚本，您有内联代码吗？
不确定我是否理解这个问题；目标是在不更改加载顺序的情况下以最佳性能加载脚本。因此，脚本首先需要先运行，第二个应该在第一个完成后立即运行。
我是说你没有第二个脚本可以加载。您有一个加载远程脚本的内联脚本，并包含在远程脚本完成时应该运行的代码。没有充分的理由为此创建第三个 <script> 元素。

标签： javascript html performance browser

【解决方案1】：

对于可能有类似问题的其他人，我使用Data URL 找到了一个不错的解决方案。这个想法是使用src 属性来设置脚本的内容。浏览器认为它是一个url，因此行为是一致的。

线

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

应该是

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

【讨论】：