CSS作为网页样式控制的核心技术，其引入方式、加载顺序和文件大小都会对页面性能产生直接影响，不同的使用策略会带来完全不同的渲染效果。合理的CSS配置能够减少页面阻塞时间，提升用户访问体验。
常见的CSS引入方式及性能影响
目前主流的CSS引入方式有三种，每种方式的加载逻辑和性能表现存在明显差异。
1. 内联样式
内联样式是直接写在HTML元素的style属性中的样式，浏览器解析到对应元素时会直接应用样式，不存在额外的网络请求，也不会阻塞渲染。但内联样式的复用性极差，当多个元素需要相同样式时会造成大量代码冗余，还会增加HTML文件的体积，不利于后续维护。
2. 内部样式表
内部样式表是将CSS代码写在HTML文件的<style>标签内，通常放在<head>区域。浏览器解析HTML时会同步加载这部分样式，不会额外发起网络请求，适合存放当前页面独有的少量样式。但如果样式内容过多，会显著增加HTML文件大小，延长HTML的解析时间。
3. 外部样式表
外部样式表是通过<link>标签引入的独立CSS文件，这是最推荐的生产环境使用方式。外部样式可以被多个页面复用，也方便浏览器缓存，减少重复加载。但浏览器在解析到<link>标签时会发起网络请求加载CSS文件，在文件加载完成前会阻塞页面的渲染，避免出现无样式内容闪烁的问题。
<!-- 外部样式表引入示例 -->
<head>
<link rel="stylesheet" href="style.css">
</head>
CSS加载顺序对性能的影响
CSS的加载顺序会直接影响页面的首次渲染时间，核心原则是优先加载首屏需要的样式，延后加载非首屏样式。
- 将外部样式表的<link>标签放在<head>的最前面，确保样式在HTML解析前就开始加载，避免页面渲染完成后才加载样式导致页面跳动。
- 对于非首屏需要的CSS，比如弹窗、滚动后才展示的模块对应的样式，可以使用媒体查询或者动态加载的方式延后加载，减少首屏阻塞时间。
- 不要将CSS放在页面底部，否则浏览器会先渲染无样式的HTML内容，等CSS加载完成后再重新渲染，造成明显的页面闪烁。
CSS文件大小优化方法
减小CSS文件大小能够直接减少网络传输时间，提升加载速度，常见的优化方式有以下几种。
1. 压缩CSS代码
删除CSS代码中的注释、空格、换行符，同时缩短属性名和属性值，能够大幅减小文件体积。生产环境上线前一定要对CSS文件进行压缩。
/* 压缩前的CSS代码 */
.container {
width: 100%;
padding: 20px;
margin: 0 auto;
}
/* 压缩后的CSS代码 */
.container{width:100%;padding:20px;margin:0 auto}
2. 移除无用CSS
很多项目在迭代过程中会积累大量不再使用的CSS代码，这些代码只会增加文件体积。可以使用专门的工具扫描项目，找出未被使用的CSS规则并删除。
3. 合理使用CSS预处理器
使用Sass、Less等预处理器时，避免编写过于嵌套的选择器，嵌套层级过深会增加CSS文件体积，还会提升选择器的匹配成本，影响渲染性能。
4. 按需加载组件样式
如果使用组件化开发，尽量让每个组件只加载自身需要的样式，避免一次性加载所有组件的全局样式，减少不必要的代码加载。
不同引入方式的性能对比
以下是三种常见CSS引入方式的性能维度对比：
| 引入方式 | 网络请求数 | 渲染阻塞情况 | 复用性 | 适用场景 |
|---|---|---|---|---|
| 内联样式 | 0 | 无阻塞 | 差 | 单个元素临时样式 |
| 内部样式表 | 0 | 阻塞HTML解析 | 一般 | 单页面独有少量样式 |
| 外部样式表 | 1（可缓存） | 阻塞渲染 | 好 | 多页面通用样式、生产环境 |
总结
CSS引入方式、加载顺序和文件大小都是影响页面性能的重要因素。生产环境中优先使用外部样式表，将样式放在<head>区域优先加载，同时通过压缩、移除无用代码等方式减小CSS文件体积，能够有效提升页面的加载速度和渲染效率，给用户带来更好的访问体验。