HTML脚本加载策略：模块脚本与DOM操作的最佳实践-html教程-PHP中文网

HTML脚本加载策略：模块脚本与DOM操作的最佳实践

碧海醫心

发布： 2025-11-06 12:41:01

原创

508人浏览过

HTML脚本加载策略：模块脚本与DOM操作的最佳实践

本文深入探讨了html中javascript脚本的加载与执行时机，特别是当脚本涉及dom操作时。文章重点解释了现代web开发中模块脚本（type="module"）的默认延迟（defer）特性，揭示了为何即使将此类脚本放置在html文档的<head>部分，也能安全有效地进行dom操作，同时避免了传统方法可能导致的页面闪烁（fouc）问题，并提供了优化用户体验的最佳实践。

在Web开发中，JavaScript脚本的加载位置和执行时机对于页面的渲染性能和用户体验至关重要，尤其当脚本需要操作页面DOM元素时。开发者常常面临一个选择：是将脚本放在HTML文档的<head>中，还是放在<body>标签的末尾？这个选择直接影响到DOM是否已准备就绪以及页面内容的呈现速度。

传统脚本加载与DOM就绪

传统的做法是，如果脚本需要操作DOM，通常会将其放置在<body>标签的末尾。这样可以确保在脚本执行时，HTML文档的大部分内容已经被浏览器解析并构建成DOM树。

<body>
  <h1 id="hello">Hello world!</h1>
  <!-- 传统做法：脚本放在body末尾 -->
  <script src="js/scripts/legacy.js"></script>
</body>

登录后复制

这种方法的缺点是，如果脚本执行了DOM内容的修改（例如国际化翻译），在脚本加载和执行完成之前，用户可能会看到原始的、未经处理的内容，导致短暂的“未样式化内容闪烁”（Flash of Unstyled Content, FOUC），影响用户体验。

另一种传统策略是将脚本放在<head>中，但需要显式地等待DOM就绪事件（如DOMContentLoaded或jQuery的$(document).ready()）。

立即学习“前端免费学习笔记（深入）”；

<head>
  <script src="js/scripts/app.js"></script>
</head>
<body>
  <h1 id="hello">Hello world!</h1>
</body>

登录后复制

对应的JavaScript代码可能如下：

// app.js
import $ from "jquery";

function main() {
  // DOM操作逻辑
  $("#hello").text("Hello from app.js!");
}

// 显式等待DOM就绪
$(main);

登录后复制

这种方式避免了FOUC，但增加了代码的复杂性，并且在某些情况下可能仍然会阻塞页面渲染。

模块脚本（type="module"）的默认延迟特性

现代Web开发中，使用ES模块（通过<script type="module">引入）已经成为标准。模块脚本的行为与传统脚本有所不同，它具有一个关键的默认特性：自动延迟（defer）执行。

根据MDN Web Docs的说明，当一个<script>标签被指定为type="module"时，它将默认表现出defer属性的行为。这意味着：

文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

查看详情

非阻塞加载：浏览器会异步加载模块脚本，不会阻塞HTML解析。
延迟执行：模块脚本的执行会在HTML文档完全解析完毕之后，但在DOMContentLoaded事件触发之前进行。

因此，即使将模块脚本放置在HTML文档的<head>中，当脚本开始执行时，DOM已经完全构建完成，可以直接进行操作，而无需显式地等待DOM就绪事件。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Module Script Example</title>
  <!-- 模块脚本放置在head中 -->
  <script type="module" src="js/scripts/home.js"></script>
</head>
<body>
  <h1 id="hello">Hello world!</h1>
</body>
</html>

登录后复制

对应的home.js文件：

// js/scripts/home.js
import $ from "jquery"; // 假设你仍然使用jQuery，或者直接使用原生DOM API
import { t } from "../lib/i18n"; // 假设这是你的国际化工具

function main() {
  // 在这里进行DOM操作，因为模块脚本默认延迟执行，DOM此时已准备就绪
  $("#hello").text(t("hello"));
  console.log("DOM manipulation executed by module script.");
}

// 无需显式等待DOM就绪，直接调用main函数
main();

登录后复制

在这个例子中，home.js作为一个模块脚本，即使在<head>中被引用，也会在HTML解析完成后才执行main()函数，确保#hello元素已经存在于DOM中。这有效地解决了FOUC问题，因为DOM操作在用户看到页面内容之前或几乎同时完成。

defer属性的用途

对于非模块脚本，如果你想获得与模块脚本类似的延迟执行行为，可以使用defer属性。

<head>
  <!-- 非模块脚本，但带有defer属性 -->
  <script src="js/scripts/analytics.js" defer></script>
</head>

登录后复制

带有defer属性的脚本也会在HTML解析完成后、DOMContentLoaded事件之前执行，并且不会阻塞HTML解析。需要注意的是，defer属性只对带有src属性的外部脚本有效，对内联脚本无效。

最佳实践与注意事项

优先使用模块脚本（type="module"）并置于<head>中：对于现代Web应用，这是推荐的做法。它结合了非阻塞加载和DOM就绪执行的优点，提供了最佳的性能和用户体验。
理解defer与async：
- defer：脚本异步加载，并在HTML解析完成后、DOMContentLoaded之前按顺序执行。适用于依赖DOM或依赖其他defer脚本的场景。
- async：脚本异步加载，并在加载完成后立即执行，不保证执行顺序，可能在HTML解析完成前或后。适用于独立、不依赖DOM或其他脚本的第三方脚本（如分析工具）。
避免阻塞渲染的脚本：尽量避免在<head>中放置没有defer或async属性的非模块脚本，因为它们会阻塞HTML解析，直到脚本下载并执行完毕，严重影响页面加载速度。
处理FOUC：如果你的脚本需要修改页面上可见的初始内容（如国际化、主题切换），并且你无法使用模块脚本或defer，那么将脚本放在<body>末尾可能会导致FOUC。在这种情况下，可以考虑使用CSS隐藏初始内容，直到JavaScript完成操作后再显示，或者使用服务器端渲染（SSR）来预渲染内容。