CSS性能优化核心是合并文件、压缩体积、按需加载。通过减少HTTP请求、启用Gzip/Brotli压缩、提取关键CSS内联及异步加载非关键样式，可显著提升页面加载速度。
CSS样式表过多确实会拖慢页面加载速度，主要体现在HTTP请求增多、解析时间变长、阻塞渲染等方面。解决核心思路是：减少请求数量 + 减小文件体积 + 优化加载时机。
合并多个link标签为一个CSS文件
浏览器对同一域名的并行请求有限（通常6~8个），每个都是一次HTTP请求。把分散的CSS（如reset.css、base.css、header.css、modal.css）合并成单个文件，能显著降低请求开销。
- 手动合并：复制粘贴所有CSS内容到一个文件，注意检查重复声明和覆盖顺序（后加载的规则优先级更高）
- 构建工具自动合并：Webpack用mini-css-extract-plugin + optimize-css-assets-webpack-plugin；Vite默认已做CSS提取与合并
- 服务端合并（慎用）：Nginx或Node.js中间件动态聚合，适合老旧项目，但增加服务端负担且不利于缓存
压缩CSS代码减小体积
去除空格、注释、换行、冗余分号等不影响功能的字符，可减少20%~40%体积；进一步启用Gzip/Brotli压缩，传输体积还能再降60%以上。
- 在线工具：cssminifier.com、clean-css.github.io（适合临时处理）
- 构建阶段集成：PostCSS配合cssnano插件，支持安全压缩（如移除未使用的选择器需配合PurgeCSS）
- 确保开启服务器压缩：Nginx配置gzip on;，或Cloudflare自动启用Brotli
避免无意义的拆分与冗余引入
不是所有CSS都需要在首屏加载。盲目按模块拆分（比如每个组件一个CSS）反而加重管理成本和请求数。
立即学习“前端免费学习笔记（深入）”；
- 区分关键CSS（Critical CSS）和非关键CSS：把首屏必需样式内联到中，其余异步加载
- 检查import链：避免A.css @import B.css，B.css又@import C.css，形成深层依赖和重复解析
- 清理废弃样式：定期用PurgeCSS或UnCSS扫描实际HTML，剔除未使用的类名和规则
基本上就这些。合并+压缩+按需加载，三者配合就能明显改善CSS带来的性能瓶颈。不复杂但容易忽略的是：合并后记得更新缓存策略（比如加版本号或哈希值），否则用户可能还在用旧CSS。
