CSS引入方式影响性能，优化加载速度

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《CSS引入方式影响性能，减少阻塞提升加载速度》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

link 标签引入 CSS 会阻塞渲染，浏览器暂停 HTML 解析直至 CSSOM 构建完成；应内联关键 CSS、用 media 属性延迟非关键样式、禁用 @import、优先使用 preload + onload 动态加载，并按用途拆分 CSS 文件。

link 标签引入 CSS 会阻塞渲染

浏览器遇到 时，会立即发起请求，并暂停 HTML 解析和 DOM 构建，直到 CSSOM 构建完成。这意味着即使 CSS 文件体积不大，只要它没加载完，页面就无法渲染首屏内容。

常见错误现象：DOMContentLoaded 延迟、白屏时间变长、LCP（最大内容绘制）指标恶化。

• 关键路径上避免在 中引入非首屏必需的 CSS
• 对首屏用到的样式，建议内联到