"### 把 Script 标签放在页面最底部的 </body> 之前和之后有什么区别？
在 HTML 文档中，<script> 标签的位置会影响页面的加载和解析行为。将 <script> 标签放在 </body> 之前和之后的区别主要体现在以下几个方面：
1. 页面渲染速度
-
放在
</body>之前： 当<script>标签放在</body>标签之前时，浏览器会先解析完 HTML 文档的所有内容，然后再执行脚本。这种做法可以确保在脚本执行时，页面的 DOM 已经构建完毕，从而提高页面的渲染速度和用户体验。 -
放在
</body>之后： 如果将<script>标签放在</body>标签之后，浏览器会在遇到<script>标签时停止解析 HTML 文档。这会导致浏览器在继续解析后续内容之前必须等待脚本执行完成。此时，如果脚本较大或存在网络延迟，会显著增加页面加载的时间，影响用户体验。
2. DOM 访问
- 放在
</body>之前： 由于页面的 DOM 已经完全构建，脚本可以安全地访问和操作 DOM 元素。这意味着脚本可以直接与页面的内容交互，例如添加事件监听器、修改元素属性等。
<body>
<div id=\"content\">Hello World</div>
<script>
const content = document.getElementById('content');
content.innerHTML = 'Hello JavaScript';
</script>
</body>
- 放在
</body>之后： 在这种情况下，如果脚本尝试访问 DOM 元素，可能会导致错误，因为 DOM 可能还未构建完成。为了避免这种情况，开发者通常会将脚本放在DOMContentLoaded事件的监听器中，以确保在 DOM 完全加载后再执行脚本。
<body>
<div id=\"content\">Hello World</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', function () {
const content = document.getElementById('content');
content.innerHTML = 'Hello JavaScript';
});
</script>
3. 影响性能
-
放在
</body>之前： 这种做法通常被认为是优化页面性能的最佳实践。浏览器在构建页面时能够并行请求和下载 JS 文件，因此页面的渲染不会受到阻塞，用户能够更快地看到页面内容。 -
放在
</body>之后： 这种方式可能导致浏览器在加载和解析 JavaScript 时阻塞 HTML 渲染，影响用户体验，尤其是在脚本较大或网络延迟的情况下。
4. 兼容性和标准
-
放在
</body>之前： 这是符合 HTML5 标准的做法，浏览器在解析 HTML 时会更高效，能够确保 JavaScript 在 DOM 完成后执行。 -
放在
</body>之后： 虽然这种做法在某些情况下仍然能够工作，但它并不是推荐的实践，可能导致跨浏览器的兼容性问题。
总结
将 <script> 标签放在 </body> 之前可以确保页面渲染更快、DOM 完全构建后再执行脚本，从而提升用户体验。相反，将 <script> 标签放在 </body> 之后则可能导致解析效率低下和潜在的 DOM 访问错误。因此，最佳实践是在 </body> 之前引入 JavaScript 代码，以确保页面的高效加载和良好的用户体验。"
