CSS作为前端页面的核心样式语言，其加载和解析过程会直接影响浏览器的渲染流程，不合理的加载顺序和低效的样式写法往往会导致页面白屏时间变长、样式闪烁等问题，因此优化CSS样式加载顺序和性能是前端开发中的重要环节。
CSS样式加载顺序的核心逻辑
浏览器解析HTML时会按照文档流的顺序加载CSS资源，同时遵循特定的优先级规则处理样式冲突，理解这些规则是优化加载顺序的基础。
样式引入的默认加载顺序
浏览器处理CSS引入的默认顺序如下：
- 内联样式：写在HTML元素style属性中的样式，优先级最高
- 内部样式表：写在HTML文件<head>标签内<style>标签中的样式
- 外部样式表：通过<link>标签引入的CSS文件，按照引入的先后顺序加载
- 浏览器默认样式：浏览器自带的默认样式规则
样式优先级判定规则
当多个样式规则作用于同一个元素时，浏览器会按照以下优先级从高到低判定：
- 内联样式（权重1000）
- ID选择器（权重100）
- 类选择器、属性选择器、伪类（权重10）
- 元素选择器、伪元素（权重1）
- 继承样式和通配符选择器（权重0）
CSS样式加载顺序优化技巧
优先加载关键CSS
关键CSS指页面首屏渲染所必需的样式，将其内联到HTML的<head>标签中可以避免外部CSS文件加载阻塞渲染，减少首屏白屏时间。
非关键CSS可以异步加载，通过添加preload属性或者动态创建<link>标签实现：
<!-- 内联关键CSS -->
<style>
.header { color: #333; font-size: 16px; }
.banner { width: 100%; height: 300px; }
</style>
<!-- 异步加载非关键CSS -->
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>
合理放置外部样式引入位置
所有外部CSS文件都应该放在<head>标签中，并且按照样式依赖顺序排列，被依赖的基础样式文件放在前面，业务样式文件放在后面，避免样式覆盖出现问题。
不要将CSS引入放在HTML文档底部，否则会导致浏览器先渲染无样式的内容，等CSS加载完成后再重新渲染，出现样式闪烁问题。
减少不必要的样式引入
按需引入CSS文件，避免全量引入大型UI库的样式文件，可以通过按需加载的方式只引入当前页面使用的组件样式，减少CSS文件的体积和加载时间。
其他实用的CSS性能调优技巧
优化CSS选择器写法
浏览器解析CSS选择器是从右到左的，因此要避免使用过于复杂的选择器，减少选择器的嵌套层级，优先使用类选择器，减少ID选择器和元素选择器的滥用。
低效选择器示例和优化后对比：
/* 低效选择器：嵌套过深，匹配成本高 */
div.container ul.list li.item a.link { color: #f00; }
/* 优化后：直接使用类选择器，匹配效率更高 */
.item-link { color: #f00; }
避免使用@import引入CSS
使用@import引入CSS会在当前CSS文件加载完成后才会加载引入的文件，会延长CSS的加载时间，建议全部使用<link>标签引入外部样式。
压缩和合并CSS文件
生产环境下需要对CSS文件进行压缩，去除注释、空格、换行等冗余内容，同时合并多个小CSS文件，减少HTTP请求次数，提升加载效率。
可以使用构建工具如webpack、vite在打包过程中自动完成CSS的压缩合并，配置示例：
// vite配置示例
import { defineConfig } from 'vite'
import cssnano from 'cssnano'
export default defineConfig({
css: {
postcss: {
plugins: [cssnano()]
}
}
})
减少重排重绘操作
修改CSS属性时尽量批量操作，避免频繁修改影响布局的属性如width、height、margin等，优先使用transform、opacity等只触发合成层变化的属性，减少重排重绘带来的性能消耗。
优化效果验证方法
可以通过浏览器的开发者工具验证优化效果，在Performance面板中录制页面加载过程，查看CSS的加载时间、渲染耗时，对比优化前后的指标变化。同时可以使用Lighthouse工具对页面的CSS性能进行评分，根据提示进一步调整优化策略。