问答题【608/1593】script标签放在header里和放在body底部里有什么区别？
难度：
2022-08-23 创建参考答案
题目要点
个人笔记
参考答案：
将 <script> 标签放在<head>和 <body> 底部，会对页面的加载和性能产生不同的影响：
<script> 标签放在 <head> 部分
优点：
- 预加载： 浏览器在渲染页面之前，会先下载和解析所有在
<head>部分的脚本文件。这样可以确保脚本在页面加载过程中随时可以被调用。 - 全局可用性： 一些脚本，特别是需要在页面一加载就运行的脚本，适合放在
<head>中。
缺点：
- 阻塞渲染： 浏览器在遇到
<script>标签时会暂停 HTML 的解析和渲染，直到脚本下载并执行完毕。这可能会导致页面加载变慢，尤其是当脚本文件较大或者需要从远程服务器下载时。 - 页面白屏时间延长： 用户可能会看到页面在加载过程中有一段时间的白屏，直到脚本加载完成。
<script> 标签放在 <body> 底部
优点：
- 非阻塞渲染： 将
<script>标签放在<body>底部意味着浏览器可以优先下载和渲染 HTML 内容，这样用户可以更快地看到页面内容。 - 更好的用户体验： 用户不会因为等待脚本加载而长时间看到空白页面。页面内容会先显示出来，然后再执行脚本，这提高了页面的响应速度和用户体验。
缺点：
- 延迟脚本执行： 如果某些脚本需要在页面加载之前运行（如某些初始化脚本），放在
<body>底部可能会导致这些脚本运行延迟，影响功能。
现代优化技术
1. defer 属性：
在 <head> 部分使用 <script> 标签时，可以添加 defer 属性。这个属性会告诉浏览器异步下载脚本，但在页面解析完成后再执行脚本。这样既可以保持脚本全局可用，又不会阻塞页面渲染。
1<script src="script.js" defer></script>
2. async 属性：
async 属性也用于异步加载脚本，但它会在脚本下载完成后立即执行，不考虑页面的解析进度。这对某些独立的、不会依赖于其他脚本或 DOM 结构的脚本很有用。
1<script src="script.js" async></script>
总结
<head>部分： 适合需要立即执行的脚本，但可能阻塞页面渲染。<body>底部： 适合一般脚本，能提高页面加载性能和用户体验。- 使用
defer或async： 现代浏览器支持这些属性，可以同时兼顾性能和功能需求。
最近更新时间：2024-08-10
