CSS对首屏加载的影响原理
浏览器在渲染页面时，需要等待所有CSS资源加载完成并解析后，才会进行页面的首次绘制，这是因为CSS会决定页面的样式和布局，未加载完成时渲染出来的页面会出现样式错乱。如果CSS文件体积过大、加载链路过长，就会直接延长首屏白屏时间，降低用户体验。因此优化CSS的加载逻辑是提升首屏速度的重要方向。
什么是关键CSS
关键CSS指的是页面首屏渲染时所必需的最小CSS集合，也就是用户打开页面后第一时间看到的区域（通常是不需要滚动就能看到的内容区域）对应的所有样式代码。非关键CSS则是首屏之外的区域、交互触发后才显示的组件对应的样式代码，这部分代码不需要在首屏渲染时加载。
关键CSS提取技巧
1. 手动提取关键CSS
对于结构简单的页面，可以通过分析首屏DOM结构，手动梳理对应的CSS规则，将这部分代码内联到HTML的<head>标签中，非关键CSS则通过异步方式加载。这种方式适合小型项目，可控性高，但是维护成本会随着页面复杂度提升而上升。
内联关键CSS的示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首屏加载优化示例</title>
<!-- 内联关键CSS -->
<style>
/* 首屏头部样式 */
.header {
height: 60px;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* 首屏 banner 样式 */
.banner {
height: 300px;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
}
.banner h1 {
font-size: 24px;
color: #333;
}
</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>
</head>
<body>
<div class="header">网站头部</div>
<div class="banner">
<h1>首屏内容区域</h1>
</div>
<div class="footer">非首屏底部内容</div>
</body>
</html>
2. 使用构建工具自动提取
对于中大型项目，手动提取关键CSS效率太低，可以借助构建工具实现自动化提取。常用的方案是结合webpack和critical、purgecss等插件，自动分析页面首屏所需的CSS并提取。
以webpack配合critical插件为例，首先安装依赖：
npm install critical webpack-critical-css-plugin --save-dev
然后在webpack配置中添加插件：
const CriticalCssPlugin = require('webpack-critical-css-plugin');
module.exports = {
// 其他webpack配置
plugins: [
new CriticalCssPlugin({
// 页面路径，可以是本地文件或者线上地址
src: 'index.html',
// 提取的关键CSS输出路径
dest: 'index.html',
// 首屏宽度
width: 1300,
// 首屏高度
height: 900,
// 是否内联关键CSS
inline: true,
// 非关键CSS的加载方式
minify: true
})
]
};
3. 基于运行时分析提取
可以在页面运行时通过JavaScript获取首屏所有DOM元素的计算样式，筛选出对应的CSS规则，生成关键CSS。这种方式可以动态适配不同设备的首屏内容，但是需要在页面加载后执行分析逻辑，适合需要适配多终端的场景。
简单的运行时提取示例代码如下：
// 获取首屏元素，这里以视口内的元素为例
function getViewportElements() {
const viewportHeight = window.innerHeight;
const allElements = document.querySelectorAll('*');
const viewportElements = [];
allElements.forEach(el => {
const rect = el.getBoundingClientRect();
if (rect.top < viewportHeight && rect.bottom > 0) {
viewportElements.push(el);
}
});
return viewportElements;
}
// 提取元素对应的CSS规则（简化示例，实际场景需要处理更复杂的选择器匹配）
function extractCriticalCss(elements) {
const criticalCss = [];
const styleSheets = document.styleSheets;
elements.forEach(el => {
const computedStyle = window.getComputedStyle(el);
// 遍历计算样式，收集用到的样式属性（实际场景需要匹配对应CSS规则）
for (let i = 0; i < computedStyle.length; i++) {
const prop = computedStyle[i];
const value = computedStyle.getPropertyValue(prop);
// 这里仅做示例，实际需要匹配原始CSS规则
}
});
return criticalCss.join('');
}
其他CSS首屏优化辅助技巧
- 压缩CSS文件：通过工具去除CSS中的注释、空白字符，减小文件体积，加快加载速度。
- 使用<link>标签的preload属性：提前加载关键CSS资源，减少加载等待时间。
- 拆分CSS文件：按照页面模块拆分CSS，避免加载无关页面的CSS代码。
- 避免使用@import引入CSS：@import会阻塞后续CSS的加载，增加渲染阻塞时间。
- 合理使用CSS媒体查询：对特定场景的CSS添加媒体查询，浏览器会按需加载，不会阻塞首屏渲染。
优化效果验证
完成CSS优化后，可以使用Chrome DevTools的Lighthouse工具、Performance面板检测首屏加载时间，对比优化前后的首次内容绘制（FCP）、最大内容绘制（LCP）等指标，确认优化效果。如果首屏渲染时间明显缩短，说明关键CSS提取和优化起到了作用。