我正在做以下工作来翻译我的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 <---------
建议的方法是什么？为什么？
有关脚本元素，请参阅MDN文档：
推迟
此布尔属性设置为向浏览器指示脚本是指在解析文档之后执行，但在正在发射DOMContentLoaded。
具有defer属性的脚本将阻止DOMContentLoaded事件，直到脚本加载并完成评估。
警告：如果src属性为不存在(即对于内联脚本(，在这种情况下，它将没有效应
defer属性对模块脚本没有影响——它们延迟违约
由于它是一个模块，它会自动延迟，因此在DOM准备好之前不会运行，因此您不需要编写任何JS来显式等待DOM准备好。