当浏览器加载一个 HTML 页面时，它会按顺序解析文档并执行其中的脚本。如果你的 JavaScript 代码位于页面头部，那么在这之前，浏览器必须先加载和执行完所有的脚本，才能继续渲染页面。这可能导致页面加载速度变慢，给用户带来不好的体验。
为了避免这个问题，我们可以将 JavaScript 代码放在 HTML 文档底部。这样，浏览器就可以在加载和渲染页面的同时异步加载和执行脚本，提高页面的性能和用户体验。
以下是一些具体的实践建议：
1. 使用 defer 属性
defer 属性告诉浏览器延迟执行脚本，直到文档解析完成。这样可以确保脚本不会阻塞页面的呈现。
<script defer src="example.js"></script>
2. 使用 async 属性
async 属性告诉浏览器异步加载和执行脚本，但是它不像 defer 属性一样等待文档解析完成。所以如果你的脚本需要访问文档中的节点，使用 async 可能会导致错误。
<script async src="example.js"></script>
3. 动态创建 script 标签
动态创建 script 标签可以延迟脚本的加载和执行时间。你可以在页面中添加一个空的 script 标签，然后使用 JavaScript 动态地为它设置 src 属性。
<script id="myScript"></script>
<script>
var script = document.getElementById('myScript');
script.src = 'example.js';
</script>4. 使用模块化脚本
如果你正在使用 ES6 模块或 CommonJS 等模块化规范，你可以将脚本作为模块引入。模块化脚本会异步加载并在需要时执行，因此不会阻塞页面的呈现。
<script type="module" src="example.js"></script>
总之，将 JavaScript 代码放在 HTML 文档底部可以提高页面性能和用户体验。根据你的需求和情况选择合适的解决方案，并遵循最佳实践来编写高效的脚本。
参考示例代码：
// example.js
console.log('Hello, world!');-- -------------------- ---- -------
--------- -----
------
------
--------- ------------
-------
------
---------- -----------
------- ----- --------------------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30900