link标签通过rel="stylesheet"引入CSS，浏览器会异步下载CSS文件并构建CSSOM，阻塞渲染但不完全阻塞HTML解析，需注意与JS交互时的阻塞问题，建议内联关键CSS、预加载和压缩资源以优化性能。
通过 link 标签导入 CSS 文件是网页开发中最常见的方式之一。它不仅简单直观，还能有效分离 HTML 结构与样式定义。下面从使用方法和加载机制两个层面进行分析。
如何使用 link 标签导入 CSS
在 HTML 文档的 区域中添加如下代码：
其中：
- rel="stylesheet"：表示链接资源为样式表，浏览器据此决定如何处理该文件
- href：指定 CSS 文件路径，可为相对路径或绝对 URL
还可设置其他属性，例如：
立即学习“前端免费学习笔记（深入）”；
- media：控制样式表在何种设备或条件下生效，如 print（打印）、screen and (max-width: 768px)
- disabled：临时禁用样式表（可通过 JS 后续启用）
- onload：可用于监听加载完成事件，常用于性能优化或字体加载控制
CSS 文件的加载机制
浏览器在解析 HTML 过程中遇到 link 标签时，会启动异步请求下载 CSS 文件，但其行为具有以下关键特性：
1. 阻塞渲染，不阻塞 HTML 解析（部分情况）
- CSS 被视为“渲染阻塞资源”——浏览器必须构建渲染树（Render Tree），而渲染树依赖 DOM 和 CSSOM，因此必须等关键 CSS 加载并解析完毕后才开始渲染页面
- HTML 解析本身通常不会被完全阻塞（现代浏览器会继续预加载资源），但最终渲染输出会被延迟
2. 并行下载，优先级调度
- 浏览器会将 CSS 文件加入网络请求队列，并根据资源类型分配较高优先级
- 多个 link 标签之间一般并行下载，具体取决于域名、HTTP 版本和并发限制
3. 构建 CSSOM
- 下载完成后，浏览器对 CSS 文本进行解析，生成 CSS 对象模型（CSSOM）
- CSSOM 是带有层级结构的树形对象，包含所有选择器及其对应样式的规则
- 由于 CSS 具有层叠性和继承性，CSSOM 的构造直接影响最终样式计算
4. 与 JavaScript 的交互影响
- 若 HTML 中存在 script 标签位于 link 之前，且脚本非 async 或 defer，浏览器会暂停 HTML 解析去执行脚本
- 如果脚本尝试访问样式信息（如 getComputedStyle），而此时 CSS 尚未加载完成，会导致强制同步加载 CSS 文件，延长白屏时间
优化建议
为了提升页面加载性能，可采取以下措施：
- 将关键 CSS 内联到 中，减少首次渲染等待时间
- 非关键 CSS 使用 media 属性延迟加载，或通过 JS 动态加载
- 利用 preload 提前声明重要样式资源：
- 压缩 CSS 文件，启用 Gzip/Brotli 传输编码
- 合理使用缓存策略（Cache-Control, ETag）避免重复下载
基本上就这些。正确理解 link 导入 CSS 的机制，有助于写出更高效、更可控的前端代码。关键是让浏览器尽早获取关键样式，同时避免不必要的阻塞。
