link 标签在 html 解析时立即并行加载css，尽早构建 CSSOM，减少渲染阻塞时间；2. @import 需等待主 CSS 文件下载解析后才发起请求，增加网络往返，延迟样式加载，影响页面渲染性能。
页面加载过程中，CSS 的引入方式会影响样式的解析和渲染时机。常见的两种引入方式是 @import 和link标签。它们在执行时机和渲染性能上有明显差异。
link 标签的加载机制
link 是 HTML 中的标签，浏览器 在解析 HTML 时遇到 <link rel="stylesheet" href="style.css"> 会立即发起对 CSS 文件的请求，这个过程是 并行且尽早开始 的。
- CSS 资源与 HTML 解析同时进行，不阻塞 dom 构建，但会阻塞渲染（直到 CSSOM 构建完成）
- 浏览器 能提前发现资源依赖，有利于优化加载优先级
- 支持 media 属性，可根据设备类型延迟或 异步加载 非关键样式
@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 应谨慎使用，尤其在首屏关键路径上。不复杂但容易忽略。
