外部样式表阻塞渲染但可缓存，2. 内联样式加快首屏但不可缓存，3. 内联关键CSS并异步加载其余可显著提升性能，4. @import导致链式阻塞不推荐使用。
在网页加载过程中，CSS 的引入方式会直接影响浏览器的渲染性能。合理的引入策略可以减少阻塞时间、加快内容呈现，提升用户体验。以下是几种常见 CSS 引入方式对渲染性能的影响分析。
1. 外部样式表（link 标签）
使用 <link rel="stylesheet" href="style.css"> 是最常见的引入方式。浏览器遇到该标签时，默认会将其作为渲染阻塞资源，必须下载并解析完 CSS 后才能继续构建渲染树，进而完成首次绘制。
影响：
- 阻塞关键渲染路径：如果外部 CSS 文件体积大或网络延迟高，会导致页面白屏时间变长。
- 可缓存性强：一旦下载，后续访问可以从缓存快速加载，提升整体性能。
- 建议将重要 CSS 内联，非关键 CSS 异步加载。
2. 内联样式（style 标签）
将 CSS 直接写在 HTML 的 <style> 标签中，通常放在 <head> 内。
立即学习“前端免费学习笔记（深入）”；
优点：
- 避免额外 HTTP 请求，减少网络延迟。
- 浏览器能立即解析样式，加快首次渲染速度。
缺点：
- 无法被浏览器缓存，每次访问都要重新下载 HTML。
- HTML 文件体积增大，可能延后 HTML 解析完成时间。
- 适合小量关键 CSS，不推荐用于大量样式。
3. 内联关键 CSS + 异步加载其余样式
将首屏必需的 CSS 内联到页面中，其余非关键 CSS 通过异步方式加载。
实现方法：
- 使用 JavaScript 动态创建 link 标签，延迟加载非关键 CSS。
- 利用
rel="preload"提前加载但不阻塞渲染：<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> - 配合 loadCSS 等工具实现平滑加载。
这种方式能显著缩短首次渲染时间，是现代高性能网站常用策略。
4. @import 导入样式
在 CSS 文件中使用 @import url("other.css"); 引入其他样式文件。
问题：
- 会造成额外的请求链式阻塞：主 CSS 下载后才知道需要再请求另一个文件。
- 无法并行加载，增加整体加载时间。
- 不推荐在生产环境使用，尤其不能在
<style>中使用 @import 加载大型资源。
基本上就这些。选择合适的 CSS 引入方式，核心是减少关键路径上的阻塞资源，优先保障首屏内容快速显示。合理拆分关键与非关键 CSS，结合内联和异步加载，是优化渲染性能的有效手段。
