@import与link引入CSS的执行时机分析

CSS引入方式对页面性能影响显著：link标签在HTML解析阶段即并行加载CSS，能尽早构建CSSOM、优化资源优先级并支持媒体查询，有效减少渲染阻塞；而@import作为CSS语法，必须等待主样式表下载并解析后才发起后续请求，造成额外网络往返和加载延迟，严重拖慢样式生效与页面渲染速度——选择link而非@import，是提升前端性能的关键实践。

页面加载过程中，CSS的引入方式会影响样式的解析和渲染时机。常见的两种引入方式是@import和link标签。它们在执行时机和渲染性能上有明显差异。

link标签的加载机制

link 是HTML中的标签，浏览器在解析HTML时遇到 会立即发起对CSS文件的请求，这个过程是并行且尽早开始的。

• CSS资源与HTML解析同时进行，不阻塞DOM构建，但会阻塞渲染（直到CSSOM构建完成）
• 浏览器能提前发现资源依赖，有利于优化加载优先级
• 支持media属性，可根据设备类型延迟或异步加载非关键样式

@import的执行特点

@import 是CSS语法，必须等主CSS文件下载并解析后才触发导入的样式文件请求。

• 如果在CSS文件中使用 @import url("extra.css");，浏览器要先下载主文件，再解析到@import语句才会发起额外请求
• 导致在HTML中通过style标签内联使用@import也会推迟资源获取

渲染顺序对比

假设页面有如下结构：

实际加载顺序为：

• 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 应谨慎使用，尤其在首屏关键路径上。不复杂但容易忽略。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《@import与link引入CSS的执行时机分析》文章吧，也可关注golang学习网公众号了解相关技术文章。