在网页中，我们通常会将 JavaScript 代码放在 <head> 或页面底部的 <body> 结束标签之前。这两种方式各有优缺点。
放在头部的优点
- 加载速度更快：将 JavaScript 代码放在头部可以让浏览器在渲染页面时同时加载 JavaScript 文件，以便更快地呈现页面内容。
- 避免出现未定义的情况：在使用一些 JavaScript 库或框架时，需要确保这些文件在其他代码执行之前被加载。将它们放在头部可以避免因未加载导致的 JavaScript 错误。
- 更好的缓存：浏览器将更容易缓存 JavaScript 文件并减少请求次数，从而提高页面加载速度。
示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- ---------- - ---- ----------- ------- ------------------------------------- ------- ------ ---- ---- --- ------- -------
放在底部的优点
- 更好的性能表现：将 JavaScript 代码放在底部可以确保页面内容在 JavaScript 加载完毕后才呈现给用户，避免阻塞页面内容的加载。
- 更容易实现并行加载：将 JavaScript 代码放在底部可以使得多个 JavaScript 文件在不同的线程中同时加载，提高页面性能。
- 更好的可用性：如果用户的浏览器不支持 JavaScript 或者 JavaScript 文件加载失败，页面内容仍然可以正常呈现给用户。
示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- ---------- ----------- ------- ------ ---- ---- --- ------- ------------------------------------- ------- -------
放在头部和底部的缺点
无论是将 JavaScript 代码放在头部还是底部，都有以下一些缺点：
- 可维护性差：将 JavaScript 代码放在多处可能会导致难以维护的问题，比如多个文件引用同一个库或框架时可能出现版本冲突。
- 阻塞其他资源加载：当 JavaScript 代码较大且加载时间较长时，可能会阻塞其他资源的加载，如图片、CSS 文件等，从而影响页面性能。
- 安全问题：将 JavaScript 放在头部可能会被黑客利用进行 XSS 攻击。
总结
综上所述，根据实际情况，我们应该选择合适的方式来放置 JavaScript 代码。在考虑到页面性能的前提下，尽量将 JavaScript 代码放在底部，但对于某些需要优先加载的 JavaScript 文件，可以将其放在头部。同时，应注意避免重复加载、版本冲突以及其他安全问题。
参考链接：Google Developers
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12236