style 标签位置对页面渲染的影响
style 标签放在 body 前后的区别及 FOUC 问题
问题
<style> 标签写在 <body> 标签前和标签后有什么区别？
解答
浏览器采用自上而下的方式解析 HTML 文档。<style> 标签的位置会直接影响页面的渲染过程。
推荐做法：写在 <head> 中（body 前）
<!DOCTYPE html>
<html>
<head>
<style>
.content {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<div class="content">页面内容</div>
</body>
</html>样式在页面内容渲染前就已加载完成，浏览器可以正确渲染页面元素。
不推荐：写在 <body> 后
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="content">页面内容</div>
</body>
<style>
.content {
color: blue;
font-size: 16px;
}
</style>
</html>当浏览器解析到 <body> 后的样式表时，会停止之前的渲染，等待样式表加载和解析完成后重新渲染。这会导致：
- 页面渲染被阻塞
- 在 IE 浏览器中可能出现 FOUC（Flash of Unstyled Content）现象，即页面闪烁，短暂显示无样式的内容
关键点
- 浏览器自上而下解析 HTML，样式应在内容渲染前加载
- 样式表放在
<body>后会阻塞渲染，导致页面重绘 - IE 浏览器中可能出现 FOUC 问题（页面闪烁）
- 始终将
<style>标签或外联样式表放在<head>中
目录