问题

<script> 标签放在 head 与 body 中有什么区别？

<script> 标签放在不同位置，主要会影响页面的性能与加载产生影响。

1. 放在 head 中：

• 预加载：浏览器在渲染页面之前，会加载并解析 <script> 标签中的内容，这样可以确保页面在加载时，可以执行脚本。
• 阻塞页面渲染：由于是预加载，所以如果在加载过程中，<script> 引用的资源过大，或者加载速度过慢，会导致页面的渲染被阻塞。 且加载过程中，页面会处于白屏。

2. 放在 body 底部：

• 非阻塞加载：浏览器在渲染页面时，会先加载并解析页面中的内容，然后再加载 <script> 引用的资源。
• 更好的体验：用户不用等待脚本加载完就可以看到页面，提高了页面的响应速度。

3. 使用 defer 与 async

• defer：在 <script> 标签添加 defer 属性，浏览器可以将 <script> 引用的资源在文档的 DOM 加载完成后才执行。这样脚本加载既不阻塞页面渲染， 又保证脚本全局使用。

• async ：跟 defer 一样也用于异步加载脚本，但 async 脚本会立即执行。