在HTML文档中，<script>标签可以放置在不同的位置，这取决于你希望脚本执行的时机。一般来讲，有两个主要的位置：<head>区域和<body>区域的末尾。
-
放在
<head>标签中：将<script>放在<head>中意味着它会在页面其他内容加载之前加载和执行。这样做的好处是可以确保Javascript代码在DOM构建之前就已经加载，适合那些不依赖DOM元素、或者需要提前执行的脚本，例如配置文件或者字符集设置。但是，这种做法可能会造成页面加载速度变慢，因为浏览器会先解析执行
<head>中的JavaScript代码，这可能会延迟页面内容的显示。例如，配置网页的字符集：
html<head> <meta charset="UTF-8"> <script> // 配置信息或者不依赖页面其他元素的脚本 </script> </head> -
放在
<body>标签的末尾：将<script>标签放在<body>的末尾，通常是在关闭的</body>标签之前，会在HTML文档的元素已经解析完成后执行JavaScript代码。这是目前最常见和推荐的做法，因为它允许浏览器先加载页面的内容，使得用户能尽快看到网页，从而提高用户体验。这种做法可以保证在脚本执行时，DOM已经构建完毕，可以安全地进行DOM操作。它还可以减少页面的可视渲染时间。
例如，当页面几乎加载完成，我们需要添加一些交互功能：
html<body> <!-- 页面内容 --> <script> // 依赖DOM元素的脚本，例如事件监听、DOM操作等 </script> </body>
在某些情况下，你可能还会看到<script>标签配合async或defer属性使用，这两个属性允许对脚本的加载和执行时机进行更细致的控制：
-
async属性表示脚本将异步加载，它一旦下载完成就会立刻执行，而不用等待其他脚本或者HTML文档解析完成。适合那些不依赖于页面其他脚本，也不依赖于DOM内容加载完成的脚本。html<script async src="script.js"></script> -
defer属性表示脚本会在HTML文档解析完成后、DOMContentLoaded事件触发之前执行。适合那些需要访问DOM，但又不影响文档初始渲染的脚本。html<script defer src="script.js"></script>
结合实际开发经验来说，除非有特殊的需求，一般建议将含有实际功能的JavaScript脚本放在<body>标签的底部，以提升页面加载性能和用户体验。