link标签性能最优，推荐引入外部样式；style标签适合内联关键CSS；@import因加载延迟和兼容性问题应避免使用。
在网页开发中，CSS的引入方式直接影响页面渲染性能和浏览器兼容性。常见的引入方法有三种：link标签、style标签和@import规则。它们在使用场景、加载机制和浏览器支持方面各有差异。
link标签：外部样式表的标准引入方式
link是HTML中引入外部CSS文件的标准方式，通过rel="stylesheet"属性指定样式表：
- 浏览器在解析HTML时会并行下载link引用的CSS文件，有助于尽早构建渲染树
- 支持media属性，可针对不同设备加载不同样式
- 兼容所有主流浏览器，包括IE6+
- 可与rel="preload"结合实现预加载，提升性能
由于link属于HTML标签，由浏览器原生支持，因此加载效率高，推荐作为外部样式引入的首选方式。
style标签：内联样式的书写位置
将CSS代码直接写在HTML文档的head或body中的style标签内：
立即学习“前端免费学习笔记（深入）”；
- 样式与页面共存，无需额外请求，适合小量关键CSS（如首屏优化）
- 优先级高于外部样式，便于覆盖默认样式
- 所有浏览器均支持，无兼容性问题
- 不利于缓存和维护，不适用于大型项目
常用于需要快速渲染的场景，比如内联关键CSS（Critical CSS），减少首次渲染阻塞时间。
@import：CSS文件内部导入机制
@import是CSS提供的语法，用于在一个样式表中引入另一个CSS文件：
- 必须写在CSS文件顶部，否则无效
- 加载顺序靠后，会导致额外的请求延迟（串行加载）
- 在IE5-7中存在兼容性问题，部分版本不支持@import url(...) screen等带media的写法
- JavaScript无法监听@import的加载完成状态
虽然可以在CSS中组织模块化结构，但性能不如link，且老版本IE对语法敏感，容易出错。
综合对比与建议
从性能角度看，link最快，因为它能被浏览器提前发现并下载；style次之，虽无网络开销但阻碍HTML解析；@import最慢，依赖主CSS加载后再发起子请求。
从兼容性看，link和style支持所有浏览器，包括老旧IE；而@import在IE低版本中存在解析缺陷，特别是混合media类型时。
现代开发中应优先使用link引入外部样式，用style内联关键CSS，避免使用@import，特别是在主文档中。若需模块化管理CSS，可通过构建工具合并文件，而非运行时导入。
基本上就这些，选择合适的引入方式能有效提升页面加载体验和兼容性表现。
