在前端页面开发中，引入css样式文件是构建页面视觉效果的基础操作，link标签是HTML标准中定义的用于关联外部资源的标签，也是官方推荐的css导入方式，掌握其使用方法和加载逻辑对开发非常重要。
link标签导入css的基本用法
使用link标签导入css非常简单，只需要在HTML文档的<head>区域添加对应的标签即可，核心属性包括rel、href、type三个，其中rel属性必须设置为stylesheet，用于告知浏览器该资源是样式表文件，href属性填写css文件的路径，type属性在HTML5规范中可省略，默认值为text/css。
基础的使用示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>link导入css示例</title>
<!-- 导入外部css文件 -->
<link rel="stylesheet" href="./style.css">
<!-- 可添加多个link标签导入多个css文件 -->
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./component.css">
</head>
<body>
<div class="content">测试内容</div>
</body>
</html>
除了基础属性外，link标签还支持media属性，用于指定样式适用的媒体场景，比如只在打印时生效的样式可以这样定义：
<link rel="stylesheet" href="./print.css" media="print">
css文件加载机制核心原理
浏览器解析HTML文档时，遇到link标签加载css的流程可以分为几个关键阶段，理解这些阶段能帮助我们规避很多样式相关的问题。
解析阶段与下载触发
浏览器从服务器获取HTML文档后，会从上到下逐行解析HTML内容，当解析到link标签时，会立即触发css文件的下载请求，这个下载过程是异步的，不会阻塞HTML的继续解析，但是如果后续有依赖该样式表渲染的内容，浏览器会等待样式表下载并解析完成后再进行渲染，避免出现样式闪动的问题。
css文件解析与渲染树构建
css文件下载完成后，浏览器会解析css内容，生成对应的CSSOM（CSS对象模型），之后会将DOM树和CSSOM树合并生成渲染树，再根据渲染树计算每个元素的位置和大小，最后完成页面的绘制。如果css文件加载时间过长，会导致渲染树生成延迟，页面会出现白屏或者无样式内容闪烁的情况。
阻塞规则说明
link标签引入的css不会阻塞HTML的解析，但是会阻塞页面的首次渲染，同时也会阻塞后续js的执行，因为js可能会操作样式相关的DOM属性，需要等待样式解析完成后再执行才能保证逻辑正确。我们可以通过下面的代码验证这个阻塞特性：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>阻塞验证</title>
<link rel="stylesheet" href="./slow.css">
</head>
<body>
<div>页面内容</div>
<script>
// 该脚本会等待slow.css加载完成后才执行
console.log("脚本执行");
</script>
</body>
</html>
link标签导入与其他导入方式对比
除了link标签，常见的css导入方式还有@import规则，两者的核心差异如下：
| 对比维度 | link标签导入 | @import导入 |
|---|---|---|
| 语法位置 | 写在HTML的<head>区域 | 写在css文件内部或者<style>标签内部 |
| 加载时机 | HTML解析到时立即触发下载 | css文件解析到对应规则时才触发下载 |
| 阻塞特性 | 阻塞渲染，不阻塞HTML解析 | 阻塞渲染，且会导致后续样式加载延迟 |
| 兼容性 | 所有浏览器都支持 | IE5以上支持，低版本兼容性差 |
| 功能扩展 | 支持rel其他属性，可关联多种资源 | 仅能导入css文件 |
基于以上对比，实际开发中优先选择link标签导入css，避免使用@import规则，减少样式加载的延迟问题。
link标签导入css的优化建议
- 将link标签放在<head>的最前面，尽早触发css文件的下载，减少页面白屏时间
- 合并多个css文件，减少link标签的数量，降低HTTP请求次数
- 对非首屏必需的css可以使用
media属性设置非阻塞加载，或者采用异步加载方案 - 对css文件进行压缩，减小文件体积，提升下载速度
异步加载非关键css的示例代码如下：
<link rel="stylesheet" href="./non-critical.css" media="print" onload="this.media='all'">
上面的代码初始设置media为print，浏览器会认为该样式不是首屏必需的，不会阻塞渲染，等加载完成后再把media改为all，应用对应样式。