在网页样式引入场景中，link标签和@import是两种核心的css加载方式，两者的加载顺序和运行机制存在明显差异，会直接影响页面的渲染效果和加载性能。
link标签的加载特性
link标签是html原生的元素，用于在html文档头部引入外部资源，引入css时的加载优先级较高。浏览器在解析html文档时，遇到link标签会立即发起css文件的请求，并且不会阻塞后续的html解析，但是会阻塞页面的渲染，直到对应的css文件加载解析完成。
使用link标签引入css的基础示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>link引入示例</title>
<!-- 原生link标签引入css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">测试内容</div>
</body>
</html>
@import的加载特性
@import是css提供的语法规则，只能在css文件内部或者<style>标签内部使用，不能单独在html中直接使用。它的加载发生在css文件解析阶段，也就是说浏览器需要先加载包含@import语句的css文件，解析到@import之后才会去请求对应的导入文件，加载优先级明显低于link标签。
@import的使用示例如下，首先是在独立css文件中使用：
/* main.css文件内容 */
/* 导入其他css文件 */
@import url("base.css");
@import url("theme.css");
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
}
也可以在html的<style>标签内部使用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>@import引入示例</title>
<style>
/* 在style标签内使用@import */
@import url("reset.css");
.content {
font-size: 16px;
color: #333;
}
</style>
</head>
<body>
<div class="content">测试内容</div>
</body>
</html>
两者的加载顺序对比
当同一个页面中同时使用link标签和@import引入css时，加载顺序遵循以下规则：
- 所有link标签引入的css文件会优先发起请求，加载优先级高于@import导入的文件
- @import导入的文件，必须等宿主css文件（也就是包含@import语句的css文件）加载解析完成之后才会发起请求
- 如果link标签引入的css文件中包含@import，那么这个@import对应的文件会在该link标签的css文件加载完成后才开始加载，优先级低于其他直接通过link引入的css文件
我们可以通过一个混合使用的示例来验证加载顺序：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>加载顺序测试</title>
<!-- 第一个link引入的css -->
<link rel="stylesheet" href="a.css">
<style>
/* style内的@import，对应的文件会在当前style解析后加载 */
@import url("b.css");
</style>
<!-- 第二个link引入的css -->
<link rel="stylesheet" href="c.css">
</head>
<body>
</body>
</html>
上述示例中，加载顺序通常是a.css、c.css先发起请求，b.css要等html解析到<style>标签并解析完其中的内容后才会发起请求，加载完成时间晚于a.css和c.css。
对页面渲染的影响差异
link标签引入的css虽然会阻塞渲染，但因为加载优先级高，通常不会造成长时间的渲染阻塞；而@import因为加载晚，可能导致页面已经渲染出无样式的内容，等到@import的css加载完成后才重新渲染，出现样式闪烁的问题。另外@import还会增加css解析的复杂度，拖慢整体样式处理的速度。
使用建议
实际开发中建议优先使用link标签引入css，避免使用@import，尤其是不要在重要的首屏样式中使用@import。如果必须用到@import，也要确保宿主css文件的体积尽可能小，减少导入文件的加载延迟。如果需要在css中拆分模块，也可以通过构建工具将多个css文件合并，避免运行时使用@import导入。