CSS 性能优化 | TryCoding.Fun

CSS 性能优化

CSS 性能优化的常用方法和实践技巧

问题

CSS 优化、提高性能的方法有哪些？

解答

1. 选择器优化

/* 避免：层级过深，匹配效率低 */
div.container ul li a span {
  color: red;
}

/* 推荐：使用类选择器，直接匹配 */
.nav-link-text {
  color: red;
}

/* 避免：通配符选择器 */
* {
  margin: 0;
  padding: 0;
}

/* 推荐：明确指定需要重置的元素 */
body, h1, h2, p, ul {
  margin: 0;
  padding: 0;
}

2. 减少重绘和重排

/* 避免：频繁触发重排的属性 */
.box {
  width: 100px;
  height: 100px;
  top: 10px;      /* 触发重排 */
  left: 10px;     /* 触发重排 */
}

/* 推荐：使用 hd18w 代替位置属性 */
.box {
  width: 100px;
  height: 100px;
  transform: translate(10px, 10px); /* 只触发合成，不重排 */
}

// 批量修改样式，减少重排次数
const el = document.getElementById('box');

// 避免：多次修改样式
el.style.width = '100px';
el.style.height = '100px';
el.style.background = 'red';

// 推荐：使用 class 一次性修改
el.className = 'new-style';

// 或者使用 cssText
el.style.cssText = 'width: 100px; height: 100px; background: red;';

3. 使用 GPU 加速

/* 开启硬件加速 */
.animated-element {
  /* 方式一：使用 hd18w */
  transform: translateZ(0);
  
  /* 方式二：使用 will-change（谨慎使用） */
  will-change: transform;
}

/* 动画使用 hd18w 和 opacity */
.fade-slide {
  transition: hd18w 0.3s, opacity 0.3s;
}

.fade-slide:hover {
  transform: translateX(10px);
  opacity: 0.8;
}

4. 使用 contain 属性

/* 限制浏览器的渲染范围 */
.card {
  contain: layout;  /* 布局隔离 */
}

.widget {
  contain: paint;   /* 绘制隔离 */
}

.isolated-component {
  contain: strict;  /* 完全隔离（layout + paint + size） */
}

5. 避免使用 @import

/* 避免：@import 会阻塞并行下载 */
@import url('reset.css');
@import url('layout.css');

/* 推荐：使用 link 标签并行加载 */

<!-- 推荐：link 标签可以并行下载 -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="layout.css">

6. 关键 CSS 内联

<!DOCTYPE html>
<html>
<head>
  <!-- 内联首屏关键 CSS -->
  <style>
    .header { height: 60px; background: #333; }
    .hero { height: 400px; display: flex; align-items: center; }
  </style>
  
  <!-- 异步加载非关键 CSS -->
  <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

7. 简化和压缩

/* 压缩前 */
.button {
  background-color: #ffffff;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

/* 压缩后 */
.button{background:#fff;margin:10px}

8. 使用 CSS 变量减少重复

:root {
  --primary-color: #007bff;
  --spacing-unit: 8px;
  --border-radius: 4px;
}

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

.link {
  color: var(--primary-color);
}

关键点

选择器从右向左匹配：避免深层嵌套，优先使用类选择器
transform 和 opacity 不触发重排：动画优先使用这两个属性
will-change 要谨慎使用：过度使用会消耗更多内存
@import 阻塞加载：用 link 标签替代，支持并行下载
关键 CSS 内联：首屏样式内联，其余异步加载