Question

我有以下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，然后才附加第二个脚本。两者都有我想避免的性能问题。

Answer 1

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

该行

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

应该是

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

同步加载脚本，第一个使用＆＃34; src＆＃34;，第二个是内联脚本

1 个答案: