`有什么区别？

将 JavaScript 代码放在 HTML 的 <body> 和 <head> 部分会导致脚本加载和执行时间的差异，进而影响网页的渲染和用户体验。主要区别如下：

<head> 中的 JavaScript：

加载时机： 浏览器解析 HTML 文档时，从上到下依次执行。放在 <head> 中的 JavaScript 会在页面内容（<body> 部分）加载之前被解析和执行。
影响渲染： 如果 <head> 中的 JavaScript 代码包含较耗时的操作（例如，大量的 DOM 操作或复杂的计算），会阻塞浏览器的渲染过程，导致页面出现空白或加载缓慢，用户体验不佳。这被称为“阻塞渲染”。
适用场景：
- 定义全局变量或函数： 在 <body> 中使用之前需要预先定义的变量或函数。
- 引入外部 JavaScript 库： 例如 jQuery、React 等，需要在使用之前加载。
- 修改页面样式： 通过 JavaScript 操作 CSS 样式，但这可能会导致“样式闪烁”（Flash of Unstyled Content，FOUC），因为样式在页面渲染后再被修改。
- 预加载资源： 可以预加载图片或其他资源，加快页面后续加载速度。

<body> 中的 JavaScript：

加载时机： 放在 <body> 中的 JavaScript 代码会在页面内容加载到该脚本位置时才被解析和执行。
影响渲染： 如果脚本放在 <body> 的末尾（</body> 之前），可以最大程度地减少对页面渲染的阻塞。因为此时页面主要内容已经加载完毕，用户可以看到内容，即使脚本执行时间较长，也不会造成明显的卡顿。
适用场景：
- DOM 操作： 需要操作页面元素的 JavaScript 代码，例如添加事件监听器、修改元素内容等，最好放在 <body> 中，确保 DOM 元素已经加载完毕。
- 页面初始化： 在页面加载完成后执行的初始化操作，例如表单验证、数据加载等。
- 用户交互： 响应用户点击、鼠标悬停等事件的 JavaScript 代码。

最佳实践：

为了优化页面加载速度和用户体验，建议：

将 JavaScript 代码放在 <body> 的末尾（</body> 之前）。 这样可以确保页面内容优先加载，避免阻塞渲染。
使用 defer 或 async 属性： 对于放在 <head> 中的脚本，可以使用 defer 或 async 属性来异步加载脚本，避免阻塞渲染。defer 会在 HTML 解析完成后，DOMContentLoaded 事件触发前执行脚本，而 async 会在脚本下载完成后立即执行，不保证执行顺序。
压缩和合并 JavaScript 文件： 减少 HTTP 请求次数，提高加载速度。
使用 CDN 加速： 利用 CDN 的缓存机制，加快 JavaScript 文件的加载速度。