内联关键CSS提升首屏速度，外部引用利于缓存复用，避免@import和行内样式滥用，通过压缩、去重、分块优化体积，结合异步加载实现高性能渲染。
网页性能优化中，CSS的引入方式直接影响页面渲染速度和用户体验。合理的加载策略能减少阻塞、加快首屏显示，尤其在移动端或弱网环境下效果显著。关键在于控制加载顺序、减小文件体积，并避免渲染阻塞。
1. 内联样式（Inline CSS）
将CSS直接写在HTML的<style>标签中，通常放在<head>内。
- 优点：避免额外HTTP请求，关键样式可立即生效，提升首屏渲染速度。
- 缺点：无法缓存，每次HTML都要重新下载样式；不利于维护，样式与结构耦合。
- 适用场景：首屏关键CSS（如头部、按钮、布局框架），建议小于4KB，避免内联过大内容。
2. 外部样式表（External CSS）
通过<link rel="stylesheet" href="...">引入外部CSS文件，是最常见的做法。
- 优点：可被浏览器缓存，多页共享时减少重复下载；利于维护和分离关注点。
- 缺点：增加HTTP请求，首次加载需等待文件下载解析，可能阻塞渲染。
- 优化建议：合并小文件减少请求数，使用CDN加速传输，启用Gzip/Brotli压缩。
3. 行内样式（Inline Styles in HTML Attributes）
直接在HTML元素上使用定义样式。
立即学习“前端免费学习笔记（深入）”；
- 优点：优先级高，适用于动态样式或组件级定制。
- 缺点：完全不可复用、无法缓存、不利于维护，大量使用会显著增加HTML体积。
- 建议：仅用于JS动态控制的个别属性，避免大规模使用。
4. @import 引入方式
在CSS文件中使用@import url("style.css");导入其他样式文件。
- 问题：@import会在文件下载后才发起导入资源请求，导致串行加载，增加延迟。
- 对比：<link>是并行加载，效率更高。
- 结论：避免在<style>中使用@import，尤其不要嵌套导入。
5. 加载顺序与渲染阻塞
CSS默认是“渲染阻塞资源”，浏览器必须解析完CSSOM才会进行布局与绘制。
- 将<link>放在<head>顶部确保尽早加载，但会阻塞渲染直到CSS下载完成。
- 非关键CSS（如打印样式、动画效果）可通过media属性异步加载：
<link rel="stylesheet" href="print.css" media="print"> - 关键路径优化：提取首屏所需CSS内联，其余异步加载。
6. 文件大小优化策略
减小CSS体积可缩短传输时间，提升解析效率。
- 压缩工具：使用Webpack、PostCSS等移除空格、注释，重命名类名（CSS Nano）。
- 删除未使用CSS：借助PurgeCSS或UnCSS扫描HTML，清除冗余规则。
- 合理组织代码：避免重复定义，使用CSS变量和现代语法（如flex、gap）减少Hack代码。
- 分块加载：按路由或功能拆分CSS，按需加载（如SPA中的懒加载组件样式）。
基本上就这些。选择合适的引入方式，结合关键CSS内联+异步加载非关键资源，再配合压缩与去重，能显著提升页面加载性能。核心原则是：早加载关键样式，延迟非必要资源，最小化传输体积。
