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 标签末尾。