HTML页面DOM翻译脚本：放head还是body？最优方案探讨

首先解释你第一个方案可行的核心原因：
ES模块脚本（<script type="module">）默认自带defer行为——浏览器会先完整解析整个HTML文档，再按脚本的加载顺序执行模块脚本。所以哪怕把它放在<head>里，执行main()的时候，<body>里的<h1 id="hello">已经被解析完成，自然能找到并修改它的文本内容。

接下来逐个分析三个方案的优劣，给出推荐结论：

方案二（脚本放body末尾）：不推荐 #

这个方案的最大问题是会出现未本地化内容闪烁（FOUC）——浏览器会先渲染出原文本"Hello world!"，等脚本加载执行后才替换成翻译内容，用户会看到短暂的文本切换，体验很差。如果脚本体积大或者网络状况不佳，这个延迟会更明显，严重影响用户体验。

方案三（head里模块脚本+$(main)）：没必要 #

这个方案本身能正常工作，但属于冗余操作。因为模块脚本已经默认延迟到DOM解析完成后执行，再额外通过$(main)绑定DOMContentLoaded事件，相当于多等了一次事件触发。虽然实际运行时的差异极小，但完全没必要做这种重复的等待逻辑。

方案一（head里模块脚本+直接调用main()）：推荐 #

这是最优选择，原因如下：

• 无闪烁问题：模块脚本在DOM解析完成后立即执行，文本替换时机和DOM首次渲染同步，用户完全看不到原文本的闪烁；
• 无冗余逻辑：充分利用ES模块的默认特性，不需要额外监听DOM就绪事件，代码更简洁；
• 加载效率更高：放在<head>里的模块脚本会在HTML解析的同时并行加载（不会阻塞HTML解析），相比放在body末尾，脚本加载完成的时间更早，执行时机更合理。

另外补充一点：ES模块会自动处理依赖加载顺序，你的脚本里依赖的jQuery、i18n库会被优先加载完成，再执行当前模块的代码，不用担心依赖未就绪的问题。

内容的提问来源于stack exchange，提问作者Raul