HTML -在头部或正文中添加脚本(以翻译DOM)？

Question

我正在做以下工作来翻译我的html页面：

<head>
  <script type="module" src="js/scripts/home.js"></script>
</head>

<body>
  <h1 id="hello">Hello world!</h1>
</body>

和

import $ from "jquery";

import { t } from "../lib/i18n";

function main() {
  $("#hello").text(t("hello"));
}

main();

我不明白为什么这个工作，我认为，为了操作DOM，我们应该等待它准备好……

另一方面，如果我在body标记的末尾添加脚本，外观和感觉就会更糟糕，因为在翻译之前有一些超时时间。

<body>
  <h1 id="hello">Hello world!</h1>
  <script type="module" src="js/scripts/home.js"></script>
</body>

具有相同行为的另一个选项是在开头包含脚本，但将js代码更改为：

import $ from "jquery";

import { t } from "../lib/i18n";

function main() {
  $("#hello").text(t("hello"));
}

$(main); // on DOM ready <---------

这里建议的方法是什么?为什么？

Answer 1

请参阅脚本元素的MDN文档

延迟 此布尔属性设置为向浏览器指示脚本打算在解析文档之后执行，但在触发DOMContentLoaded之前执行。 带有延迟属性的脚本将防止DOMContentLoaded事件触发，直到脚本加载并完成计算。 警告:如果src属性不存在(例如，对于内联脚本)，则不能使用该属性，在这种情况下，它不会产生任何效果。 延迟属性对模块脚本没有影响，默认情况下它们会延迟。

因为它是一个模块，所以它会被自动推迟，所以不会在DOM准备好之后才运行，因此您不需要编写任何JS来显式地等待DOM准备就绪。

Answer 2

您可以在脚本属性中使用延迟。或者在html标记中的body标记下编写脚本标记。