Web前端入门第 21 问:CSS 最佳位置放在哪个标签中?

news/2025/3/16 10:41:50/文章来源:https://www.cnblogs.com/linx/p/18774642

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 标签放在不同位置,会不会影响页面加载渲染?

  1. style 标签放在 head 标签中

  1. style 标签放在 body 标签内容中

  1. style 标签放在 body 标签最后

总结:注意看 FCP 位置,三者没有区别,所以 style 标签放在三个不同位置并未影响页面加载渲染顺序,所有的渲染都放在了解析 HTML 之后。

  1. link 标签放在 head 标签中

加载效果请看视频:

博客园不支持视频嵌入,效果请在此查看:https://mp.weixin.qq.com/s/YGMO0LX9hhiJFXfViClFDQ

  1. link 标签放在 body 标签开始

  1. link 标签放在 body 标签内容中

加载效果请看视频:

博客园不支持视频嵌入,效果请在此查看:https://mp.weixin.qq.com/s/YGMO0LX9hhiJFXfViClFDQ

可以明显看到内容有一个有闪烁过程,先出现 HTML 内容,后渲染了 CSS。

  1. link 标签放在 body 标签最后

加载效果请看视频:

博客园不支持视频嵌入,效果请在此查看:https://mp.weixin.qq.com/s/YGMO0LX9hhiJFXfViClFDQ

可以明显看到内容有一个有闪烁过程,先出现 HTML 内容,后渲染了 CSS。

总结:link 标签放在 4 个不同位置,出现了 4 种不同的结果,从用户体验角度来看最优解是放在 head 标签中。​

问题思考

如果将 css 放在 html 标签下,有没有影响?

总结

  1. style 标签位置并不会影响页面解析和渲染,显示效果也完全一样。

  2. link 标签放在 head 标签中,会阻塞 HTML 解析和渲染,呈现效果:页面会有一段“白屏”时间,白屏时间与 css 文件的下载速度有关,最后内容和 css 样式一起出现,未出现页面内容闪烁,整个过程只发生一次解析渲染。

  3. link 标签放在 body 标签中,会阻塞 HTML 的解析,不会阻塞 HTML 渲染,但 HTML 解析被拆分为多次进行,内容也会出现闪烁现象,导致用户看到没有 css 的 HTML 骨架,像是内容在“裸奔”一样,从而导致用户体验不好。

内部样式可以放在任何位置;从用户体验的角度来说外部样式建议在 head 标签中引入,特殊情况可能想要用户先看到 HTML 内容,则可以考虑放在 body 标签末尾。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/899715.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MiTS与PoTS:面向连续值时间序列的极简Transformer架构

原始"Attention Is All You Need"论文中提出的标准Transformer架构最初设计用于处理离散输入和输出序列标记(token),但将其应用于时间序列分析时,需要对模型结构进行适当调整以适应连续数据特性。本文详细阐述了使原始Transformer架构能够高效处理连续值时间序列数…

Cisco Secure Firewall Threat Defense Virtual 7.7.0 - 思科下一代防火墙虚拟设备 (FTDv)

Cisco Secure Firewall Threat Defense Virtual 7.7.0 - 思科下一代防火墙虚拟设备 (FTDv)Cisco Secure Firewall Threat Defense Virtual 7.7.0 - 思科下一代防火墙虚拟设备 (FTDv) Firepower Threat Defense (FTD) Software for ESXi & KVM 请访问原文链接:https://sysi…

Citrix Virtual Apps and Desktops 7 2411 - 应用程序和桌面虚拟化

Citrix Virtual Apps and Desktops 7 2411 - 应用程序和桌面虚拟化Citrix Virtual Apps and Desktops 7 2411 - 应用程序和桌面虚拟化 App and Desktop Virtualization | VDI 请访问原文链接:https://sysin.org/blog/citrix-virtual-apps-and-desktops/ 查看最新版。原创作品,…

闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器

需求背景 阿里云服务器到期了,正好家里有闲置的电脑,还有公网IP,打算装个linux服务器使用。本文章主要重点是实现远程连接虚拟机内服务器,打通网络连接,更多玩法大家可以自行探索。 ps: 公网IP自己向运营商申请,具体方法可以各大平台搜索下,本人是ipv4; 方案 本人是电信…

Ollama系列02:快速上手搭建私有的AI对话框和智能体—chatbox版

本文是Ollama系列教程的第2篇,在上一篇中我们介绍了Ollama的安装、大模型的下载和本地部署,本篇中我们将介绍如何将Ollama整合到chatBox中,并构建属于自己的智能体。 Ollama系列教程目录(持续更新中):Ollama系列教程01:轻松3步本地部署deepseekchatbox介绍ChatBox AI 是…

【操作系统习题】就绪、阻塞、执行态用户进程数量分析

一道理论课中有关用户进程三种状态数量的题目分析零、题目示例一、题目分析 1.1 前提条件 1.1.1 条件一:不考虑短期的进程调度切换什么是“短期进程调度切换”?调度器基于特定策略(如时间片耗尽等)​主动中断当前运行进程,将CPU分配给其他就绪进程的行为叫做“短期进程调…

9图看2025中国新质生产力发展举措

发展新质生产力,政府工作报告这样说: ①推动商业航天、低空经济等新兴产业安全健康发展 ②培育生物制造、量子科技、具身智能、6G等未来产业 ③促进专精特新中小企业发展壮大,支持独角兽企业、瞪羚企业发展 ④支持大模型广泛应用 ⑤大力发展智能网联新能源汽车、人工智能手机…

manim边学边做--三维图形的场景类

在Manim中,ThreeDScene是一个专门为三维场景设计的类。 它通过配置三维相机、支持复杂的相机运动以及管理物体与相机的交互关系,为科学可视化、工程仿真、数学教育等领域提供了强大的工具。 典型应用场景包括:三维几何图形的动态演示(如旋转立方体、莫比乌斯环) 物理过程的…

第三章 准确估算的价值

3.1 高估更好还是低估更好 3.1.1 反对高估的观点 管理人员和其他项目干系人有时会担心,如果项目被高估了,帕金森法则就会起作用——也就是所有可以用来完成工作的时间都会被浪费掉。因此,为了避免帕金森法则,某些管理人员会有意识地 "压缩" 这估算值。 另一个顾虑…

Windows中conda的安装与使用

下载安装miniconda 说明: Miniconda是一款管理python环境的软件工具 第一步:下载miniconda 代码如下: win+r后,输入cmd指令按回车 在终端中输入: curl https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/Miniconda3-py39_4.12.0-Windows-x86_64.exe --output 按照…

CHT 另解

引入 CHT 又叫 凸包优化,是一种利用一次函数(斜率)来优化 Dp 的一种方法。 它的独特之处在于,传统斜率优化依靠的是一个一个的点,而凸包优化是利用一条条直线来优化,省去了一些码量。 我们用一道例题引入。 例1 HDU-3480 Dp 暴力 Link 题目是说,将 \(n\) 个数划分到 \(m…

PHP 发送电子邮件 功能 用法运用 详解

PHP发送电子邮件功能、用法及运用详解 一、PHP发送电子邮件的基本概述 PHP提供了多种方式来发送电子邮件,其中最常用的方法是使用内置的mail()函数或通过SMTP(Simple Mail Transfer Protocol)协议。随着技术的发展,许多开发者更倾向于使用第三方库(如PHPMailer)来增强邮件…