为什么 `<script>` 标签不能自闭合？

2024-06-18 06:45:14

为什么自闭合的 <script> 标签在浏览器中不生效？

许多网页开发者在学习 HTML 的过程中，都会接触到自闭合标签（self-closing tag）。例如，<br /> 或 <img /> 这样的标签，因为标签内不需要包含任何内容，所以可以使用自闭合的形式。然而，当你尝试将同样的逻辑应用到 <script> 标签上时，却发现它并不起作用。例如，<script src="foobar.js" /> 并不会加载 foobar.js 文件。

问题根源

<script> 标签无法自闭合的原因主要源于历史原因和规范的演变。

早期 HTML 规范的宽松性: 在早期的 HTML 规范中，语法要求较为宽松，允许 <script> 标签自闭合。开发者可以使用 <script src="foobar.js" /> 这样的写法，浏览器也能正确解析。
XHTML 的兴起与语法严格化: 随着 XHTML 的出现，为了保持语法的一致性和严格性，<script> 标签必须使用完整的闭合标签 </script>。
浏览器兼容性问题: 虽然 XHTML 已经不再是主流，但为了保持对旧版浏览器的兼容性，现代浏览器仍然不支持 <script> 标签的自闭合写法。

当你使用 <script src="foobar.js" /> 这样的自闭合标签时，浏览器会将其解析为：

<script src="foobar.js"> </script>

这意味着浏览器会将 /> 之前的部分视为 <script> 标签的开始，而将 /> 之后的部分视为一个空的 <script> 标签。因此，foobar.js 文件并不会被正确加载。

正确引入 JavaScript 文件

为了确保 <script> 标签在所有浏览器中都能正常工作，请务必使用完整的闭合标签：

<script src="foobar.js"></script>

最佳实践：外部 JavaScript 文件

虽然在技术上可以使用 <script></script> 来包含 JavaScript 代码，但最佳实践是将 JavaScript 代码放在外部文件中，并使用 <script> 标签引入。这样做的好处有：

提高代码可读性和可维护性: 将 JavaScript 代码与 HTML 代码分离，使代码结构更加清晰，更易于阅读和维护。
提升页面加载速度: 外部 JavaScript 文件可以被浏览器缓存，当用户再次访问网站时，可以直接从缓存中加载，从而减少页面加载时间，提升用户体验。
便于代码复用: 将 JavaScript 代码模块化，可以方便地在多个页面中重复使用，提高开发效率。

常见问题解答

1. 为什么我的 JavaScript 代码没有生效？

检查代码错误: 首先，请检查你的 JavaScript 代码是否存在语法错误。可以使用浏览器的开发者工具（通常按 F12 键打开）来查看控制台中的错误信息。
确认文件路径: 确保你的 <script> 标签中指定的 JavaScript 文件路径是正确的。
检查标签位置: 通常情况下，我们建议将 <script> 标签放在 HTML 文档的 <head> 部分或 <body> 部分的末尾。

2. 我可以使用内联 JavaScript 代码吗？

虽然可以在 HTML 文档中使用 <script> 标签直接嵌入 JavaScript 代码（称为内联 JavaScript），但我们通常不推荐这样做。内联 JavaScript 会增加 HTML 文档的大小，降低代码的可读性和可维护性。

3. 如何延迟 JavaScript 文件的加载？

你可以使用 defer 属性来延迟 JavaScript 文件的加载。例如：

<script src="foobar.js" defer></script>

带有 defer 属性的 <script> 标签会告诉浏览器在解析完 HTML 文档后再执行 JavaScript 代码，从而避免阻塞页面渲染。

4. async 属性和 defer 属性有什么区别？

async 属性和 defer 属性都可以用于延迟 JavaScript 文件的加载，但它们的工作方式有所不同。async 属性会告诉浏览器立即下载 JavaScript 文件，并在下载完成后立即执行，而 defer 属性会告诉浏览器在解析完 HTML 文档后再执行 JavaScript 代码。

5. 我应该使用哪个属性，async 还是 defer?