以下是将 <script> 标签放在 HTML 文档的 <body> 内底部的几个重要原因：
1. 页面加载顺序和性能优化
-
原理：
- 当浏览器解析 HTML 文档时，它会按顺序执行遇到的元素。如果
<script>标签位于<head>中或<body>的顶部，浏览器会在下载和执行脚本时暂停 HTML 文档的解析和渲染，因为脚本可能会修改 DOM 元素或依赖于某些 DOM 元素。将<script>标签放在<body>的底部可以确保在执行脚本之前，大部分的 HTML 内容已经被解析和渲染，页面的主要部分可以更快地显示给用户，提供更好的用户体验。
- 当浏览器解析 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 元素已经存在。
- 很多脚本需要操作 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 属性，根据具体情况灵活选择。
![折腾笔记[4]-cuda的hello-world](https://img2024.cnblogs.com/blog/1048201/202501/1048201-20250101185632118-953333443.png)
