在 Web 开发中，我们通常将 JavaScript 代码放在 <head> 或 <body> 中的某个位置。但是，如果你想让网页更快地加载并提高用户体验，那么将 JavaScript 代码放在页面底部可能是一个不错的选择。
为什么要将 JavaScript 代码放在页面底部？
加载速度更快
将 JavaScript 代码放在 <head> 中会阻塞浏览器的渲染过程，因为浏览器需要先下载 JavaScript 文件并解析执行才能继续渲染页面。而将 JavaScript 代码放在页面底部可以使页面先渲染出来，然后再去下载和执行 JavaScript 代码，从而提高页面加载速度。
改善用户体验
当用户打开一个页面时，他们希望能够尽快看到内容。如果页面加载速度很慢，用户可能会感到失望、沮丧甚至离开网站。将 JavaScript 代码放在页面底部可以减少用户等待时间，改善用户体验。
如何将 JavaScript 代码放在页面底部？
要将 JavaScript 代码放在页面底部，可以使用以下两种方法：
1. 使用 defer 属性
在 <script> 标签中添加 defer 属性可以告诉浏览器该脚本文件应该在页面渲染完毕后再执行。这样可以确保 JavaScript 代码不会影响页面加载速度和用户体验。
-- -------------------- ---- ------- --------- ----- ------ ------ -------- ---------- ---------------- ------- ------ ---- ---- --- ------- ----- ------------------------------ ------- -------
2. 使用 async 属性
在 <script> 标签中添加 async 属性可以告诉浏览器该脚本文件是异步的，应该在下载完成后立即执行，而不必等待其他资源的加载和解析。
-- -------------------- ---- ------- --------- ----- ------ ------ -------- ---------- ---------------- ------- ------ ---- ---- --- ------- ----- ------------------------------ ------- -------
需要注意的是，使用 async 属性加载的脚本文件不能保证执行顺序，因此适合于独立的脚本文件或者不依赖其他脚本文件的情况。
总结
将 JavaScript 代码放在页面底部可以加快页面加载速度和改善用户体验。我们可以使用 defer 或 async 属性来实现这个目标。但是需要根据你的页面实际情况来选择适合的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11480
