<script> 标签放在 HTML 文档的 <body> 内底部

以下是将 <script> 标签放在 HTML 文档的 <body> 内底部的几个重要原因：

1. 页面加载顺序和性能优化

原理：
- 当浏览器解析 HTML 文档时，它会按顺序执行遇到的元素。如果 <script> 标签位于 <head> 中或 <body> 的顶部，浏览器会在下载和执行脚本时暂停 HTML 文档的解析和渲染，因为脚本可能会修改 DOM 元素或依赖于某些 DOM 元素。将 <script> 标签放在 <body> 的底部可以确保在执行脚本之前，大部分的 HTML 内容已经被解析和渲染，页面的主要部分可以更快地显示给用户，提供更好的用户体验。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
  <script src="script.js"></script>
</body>
</html>

在这个例子中，用户会先看到 <h1> 和 <p> 元素，然后才会执行 script.js。

2. 避免阻塞 DOM 解析和渲染

原理：
- 当 <script> 包含在 <head> 中时，它会阻塞后续的 HTML 元素的解析和渲染，因为浏览器需要先下载并执行脚本。对于较大的脚本文件或外部依赖的脚本，这可能会导致页面显示延迟，用户可能会看到一个空白页面，直到脚本执行完成。将 <script> 放在 <body> 底部可以避免这种情况，因为此时页面的主要结构已经解析和渲染，用户可以看到部分页面内容。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <div id="content">
    <p>Some content here</p>
  </div>
  <script src="largeScript.js"></script>
</body>
</html>

这里，在 largeScript.js 下载和执行之前，用户可以看到 div#content 中的内容，因为脚本的执行不会阻塞页面的初始渲染。

3. 脚本对 DOM 的操作

原理：
- 很多脚本需要操作 DOM 元素，如果 <script> 标签放在 <head> 中，可能会出现找不到 DOM 元素的情况，因为这些元素还未被解析。将 <script> 放在 <body> 底部可以确保在脚本执行时，它需要操作的 DOM 元素已经存在。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <div id="content">
    <p>Some content here</p>
  </div>
  <script>
    // 这个脚本可以安全地操作 #content 元素
    const content = document.getElementById('content');
    content.style.backgroundColor = 'red';
  </script>
</body>
</html>

在这个例子中，script 标签中的代码可以安全地操作 id 为 content 的元素，因为该元素已经在页面中被解析。

4. 异步和延迟脚本的替代方案

原理：
- 虽然 async 和 defer 属性可以用来控制脚本的执行时间，但将 <script> 放在 <body> 底部是一种更简单的方式，可以达到类似的效果，尤其适用于不熟悉这些属性或在不支持这些属性的旧浏览器中。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
  <script src="script.js"></script>
  <script src="anotherScript.js"></script>
</body>
</html>

在这里，script.js 和 anotherScript.js 会按顺序依次执行，且不会阻塞页面的初始渲染。

5. 页面资源加载优化

原理：
- 将 <script> 放在 <body> 底部可以确保页面的主要资源（如样式表、图片）先加载，而不是等待脚本下载和执行，从而优化页面的整体加载顺序，提高页面的加载速度。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <img src="image.jpg" alt="An image">
  <script src="script.js"></script>
</body>
</html>

在这个例子中，style.css 和 image.jpg 会先于 script.js 加载，使页面的样式和图片能够更快地显示。

总结

将 <script> 标签放在 <body> 内的底部是一种优化页面性能和用户体验的有效方式，它可以避免阻塞页面的初始渲染，确保 DOM 元素在脚本执行前已经解析，同时优化页面资源的加载顺序，提高页面的整体加载速度。对于一些需要操作 DOM 的脚本，这种方式可以保证它们在操作时 DOM 元素已经存在，避免出现找不到元素的错误。然而，对于一些不依赖于 DOM 的脚本或需要尽快执行的脚本（如统计脚本），也可以使用 async 或 defer 属性，根据具体情况灵活选择。

标签：脚本,DOM,标签,元素,content,HTML,文档,页面
From： https://www.cnblogs.com/zsnhweb/p/18646205