Web前端入门第 21 问：CSS 最佳位置放在哪个标签中？
HELLO，这里是大熊的前端开发笔记。
先了解一个关键词 FCP (First Contentful Paint): 首次内容绘制，指的是浏览器渲染来自 DOM 的任何内容（包括文本、图像、SVG 等）的时间点。这是用户第一次看到页面上出现的内容，标志着页面开始有内容展示给用户。
使用 开发者工具 限制浏览器加载速度
设置开发者工具的网络加载速度，让浏览器加载速度变慢，从而达到模拟网络延迟的效果，再瞅瞅 css 存放不同位置的影响。
代码准备
新建一个 example-21.html 文件，内容如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<!-- <link rel="stylesheet" href="./example-21.css"> -->
<!-- <style>
.style1 {
font-size: 20px;
color: red;
}
</style> -->
</head>
<body>
<p class="style1">此处是第一段文字</p>
</body>
</html>
新建一个 example-21.css 文件，内容如下：
.style1 {
color: red;
font-size: 12px;
}
.style1 {
font-size: 20px;
}
还需要一个 web 服务器，用于测试 http 请求效果，这里推荐 nginx 服务器，下载地址：https://nginx.org/en/download.html
以 nginx-1.24.0 为例，windows 直接下载 zip 文件，解压后运行 nginx-1.24.0/nginx.exe 即可，将以上的两个文件(example-21.html、example-21.css)直接放在解压目录下的 nginx-1.24.0/html/test 文件夹中，即可。
浏览器访问：http://localhost/test/example-21.html 能正常打开，那么恭喜你，已经架设了一个本地服务器。
style 标签的不同位置效果
先瞅瞅 style 标签放在不同位置，会不会影响页面加载渲染？
- style 标签放在 head 标签中
- style 标签放在 body 标签内容中
- style 标签放在 body 标签最后
总结：注意看 FCP 位置，三者没有区别，所以 style 标签放在三个不同位置并未影响页面加载渲染顺序，所有的渲染都放在了解析 HTML 之后。
link 标签的不同位置效果
- link 标签放在 head 标签中
加载效果请看视频：
博客园不支持视频嵌入，效果请在此查看：https://mp.weixin.qq.com/s/YGMO0LX9hhiJFXfViClFDQ
- link 标签放在 body 标签开始
- link 标签放在 body 标签内容中
加载效果请看视频：
博客园不支持视频嵌入，效果请在此查看：https://mp.weixin.qq.com/s/YGMO0LX9hhiJFXfViClFDQ
可以明显看到内容有一个有闪烁过程，先出现 HTML 内容，后渲染了 CSS。
- link 标签放在 body 标签最后
加载效果请看视频：
博客园不支持视频嵌入，效果请在此查看：https://mp.weixin.qq.com/s/YGMO0LX9hhiJFXfViClFDQ
可以明显看到内容有一个有闪烁过程，先出现 HTML 内容，后渲染了 CSS。
总结：link 标签放在 4 个不同位置，出现了 4 种不同的结果，从用户体验角度来看最优解是放在 head 标签中。
问题思考
如果将 css 放在 html 标签下，有没有影响？
总结
-
style 标签位置并不会影响页面解析和渲染，显示效果也完全一样。
-
link 标签放在 head 标签中，会阻塞 HTML 解析和渲染，呈现效果：页面会有一段“白屏”时间，白屏时间与 css 文件的下载速度有关，最后内容和 css 样式一起出现，未出现页面内容闪烁，整个过程只发生一次解析渲染。
-
link 标签放在 body 标签中，会阻塞 HTML 的解析，不会阻塞 HTML 渲染，但 HTML 解析被拆分为多次进行，内容也会出现闪烁现象，导致用户看到没有 css 的 HTML 骨架，像是内容在“裸奔”一样，从而导致用户体验不好。
内部样式可以放在任何位置；从用户体验的角度来说外部样式建议在 head 标签中引入，特殊情况可能想要用户先看到 HTML 内容，则可以考虑放在 body 标签末尾。
浙公网安备 33010602011771号