script 标签位置

约 336 字大约 1 分钟

2025-12-04

思考

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

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

放在 head 中：

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

放在 body 底部：

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

使用 defer 与 async

有 defer 与 async 都会被异步加载，即加载和渲染后续文档元素的过程将和 script.js 的加载并行进行（异步）。两者的区别是：

async：当 script.js 加载完成后，会立即执行。执行 script.js 时，html 解析暂停。
defer：当 script.js 加载完成后，会等待 html 解析完成后再执行。