Script 标签位置的影响
script 标签放在 head 和 body 底部的区别及优化方案
问题
<script> 标签放在 <head> 和 <body> 底部有什么区别？
解答
放在 <head> 部分
优点：
脚本会在页面渲染前下载和解析，确保脚本随时可用。适合需要在页面加载时立即执行的脚本。
缺点：
浏览器遇到 <script> 标签时会暂停 HTML 解析和渲染，直到脚本下载并执行完毕。这会导致页面加载变慢，用户可能看到较长时间的白屏。
放在 <body> 底部
优点：
浏览器优先下载和渲染 HTML 内容，用户可以更快看到页面。不会因为等待脚本加载而长时间看到空白页面，提升用户体验。
缺点：
如果脚本需要在页面加载前运行（如初始化脚本），放在底部会导致执行延迟。
现代优化方案
使用 defer 或 async 属性可以兼顾性能和功能需求。
defer 属性：
异步下载脚本，但在页面解析完成后按顺序执行。适合依赖 DOM 结构的脚本。
<script src="script.js" defer></script>async 属性：
异步下载脚本，下载完成后立即执行，不考虑页面解析进度。适合独立的、不依赖其他脚本的场景。
<script src="script.js" async></script>关键点
<head>中的脚本会阻塞页面渲染，导致白屏时间延长<body>底部的脚本不阻塞渲染，用户体验更好defer属性异步加载，页面解析完成后按顺序执行async属性异步加载，下载完立即执行，不保证顺序- 优先使用
defer或async，避免阻塞渲染
目录