link标签在html解析时立即并行加载css，尽早构建CSSOM，减少渲染阻塞时间；2. @import需等待主CSS文件下载解析后才发起请求，增加网络往返，延迟样式加载，影响页面渲染性能。
页面加载过程中，CSS的引入方式会影响样式的解析和渲染时机。常见的两种引入方式是@import和link标签。它们在执行时机和渲染性能上有明显差异。
link标签的加载机制
link 是HTML中的标签，浏览器在解析HTML时遇到 <link rel="stylesheet" href="style.css"> 会立即发起对CSS文件的请求，这个过程是并行且尽早开始的。
@import的执行特点
@import 是CSS语法，必须等主CSS文件下载并解析后才触发导入的样式文件请求。
- 如果在CSS文件中使用
@import url("extra.css");，浏览器要先下载主文件，再解析到@import语句才会发起额外请求 - 导致在HTML中通过style标签内联使用@import也会推迟资源获取
渲染顺序对比
假设页面有如下结构：
立即学习“前端免费学习笔记（深入）”；
<head>
<link rel=”stylesheet” href=”A.css“>
<style>@import url(‘B.css’);</style>
</head>
实际加载顺序为：
- A.css 与 HTML 并行加载
- B.css 必须等待 A.css 下载并解析完毕后才开始请求
- 因此 B.css 的样式应用会晚于 A.css，即使它在文档流中位置靠后
这说明：@import 的执行是的，且发生在CSS解析阶段，而非HTML解析阶段。
性能建议
- 优先使用
link而非@import引入关键CSS，确保尽早加载 - 避免在CSS文件中嵌套多个 @import，防止“雪崩式”延迟
- 对于非关键CSS，可结合 media=”(not all)” 或动态插入实现异步加载
- 现代项目构建中，可通过预加载（preload）提示浏览器提前抓取重要样式
基本上就这些。从渲染性能角度看，link 更高效，@import 应谨慎使用，尤其在首屏关键路径上。不复杂但容易忽略。