知识库

Appearance

Return to top
On this page

CSS优化

CSS优化是提升网页加载速度和渲染性能的重要手段。通过合理的CSS编写和加载策略，可以减少渲染阻塞、降低文件大小并提升用户体验。

选择器优化

避免低效选择器

CSS选择器的效率从高到低依次为：

  • ID选择器 (#id)
  • 类选择器 (.class)
  • 标签选择器 (div)
  • 相邻选择器 (h2 + p)
  • 子选择器 (ul > li)
  • 后代选择器 (ul a)
  • 通配符选择器 (*)
css
/* 推荐 */
.header-nav { }

/* 不推荐 */
ul.nav li a { }

减少选择器层级

避免过深的选择器嵌套：

css
/* 推荐 */
.card-title { }

/* 不推荐 */
.main-content .container .card .title { }

文件优化

压缩CSS

移除不必要的空格、注释和换行：

css
/* 原始CSS */
.container {
  margin: 0 auto; /* 居中对齐 */
  padding: 20px;
  width: 100%;
}

/* 压缩后 */
.container{margin:0 auto;padding:20px;width:100%}

关键CSS内联

将首屏必需的CSS内联到HTML中：

html
<head>
  <style>
    /* 首屏关键CSS */
    body { margin: 0; font-family: Arial; }
    .header { height: 60px; background: #fff; }
  </style>
  <link rel="stylesheet" href="non-critical.css">
</head>

渲染性能

避免强制同步布局

避免在JavaScript中强制浏览器立即计算样式：

javascript
// 不推荐
element.style.width = '100px';
console.log(element.offsetHeight); // 强制重新计算布局
element.style.height = '200px';

// 推荐
element.style.width = '100px';
element.style.height = '200px';
console.log(element.offsetHeight);

使用transform和opacity

使用transform和opacity属性来实现动画，这些属性不会触发重排：

css
/* 推荐 - 使用transform */
.animate-move {
  transition: transform 0.3s ease;
}
.animate-move:hover {
  transform: translateX(10px);
}

/* 不推荐 - 改变left值会触发重排 */
.move {
  transition: left 0.3s ease;
}
.move:hover {
  left: 10px;
}

响应式优化

合理使用媒体查询

组织媒体查询以提高缓存效率：

css
/* 推荐 - 将响应式规则放在相关组件旁边 */
.card {
  width: 100%;
  padding: 10px;
}

.card-title {
  font-size: 16px;
}

@media (min-width: 768px) {
  .card {
    width: 50%;
  }
  .card-title {
    font-size: 18px;
  }
}

字体优化

优化字体加载

使用font-display属性优化字体加载：

css
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap; /* 允许使用备用字体直到自定义字体加载完成 */
}

CSS变量

使用CSS自定义属性

利用CSS变量提高维护性：

css
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --border-radius: 4px;
}

.button {
  background: var(--primary-color);
  border-radius: var(--border-radius);
}

预处理器优化

使用SCSS/Less时的注意事项

  • 避免过度嵌套（建议不超过3层）
  • 合理使用@mixin和@extend
  • 利用函数进行复用

工具和最佳实践

使用CSS-in-JS

在现代框架中考虑使用CSS-in-JS方案：

javascript
// styled-components 示例
import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

性能监测

使用开发者工具

  • 使用Chrome DevTools的Performance面板
  • 检查CSS解析和样式计算时间
  • 识别复杂的重绘和回流

最佳实践总结

  • 优先加载关键CSS
  • 最小化CSS文件大小
  • 使用高效的CSS选择器
  • 避免CSS阻塞渲染
  • 使用硬件加速属性
  • 定期清理未使用的CSS代码