script 标签位置
约 331 字大约 1 分钟
2025-12-04
问题
<script> 标签放在 head 与 body 中有什么区别?
<script> 标签放在不同位置,主要会影响页面的性能与加载产生影响。
- 放在 head 中:
- 预加载:浏览器在渲染页面之前,会加载并解析
<script>标签中的内容,这样可以确保页面在加载时,可以执行脚本。 - 阻塞页面渲染:由于是预加载,所以如果在加载过程中,
<script>引用的资源过大,或者加载速度过慢,会导致页面的渲染被阻塞。 且加载过程中,页面会处于白屏。
- 放在 body 底部:
- 非阻塞加载:浏览器在渲染页面时,会先加载并解析页面中的内容,然后再加载
<script>引用的资源。 - 更好的体验:用户不用等待脚本加载完就可以看到页面,提高了页面的响应速度。
- 使用
defer与async
defer:在<script> 标签添加defer属性,浏览器可以将<script>引用的资源在文档的 DOM 加载完成后才执行。这样脚本加载既不阻塞页面渲染, 又保证脚本全局使用。async:跟defer一样也用于异步加载脚本,但async脚本会立即执行。