CSS的性能优化策略

CSS的性能优化是提升网页加载速度和用户体验的关键环节。合理的优化策略可以减少渲染阻塞、降低文件大小、提高代码效率，从而让页面更快呈现并流畅运行。

减少选择器的复杂度

CSS选择器的匹配是从右向左进行的，过于复杂的选择器会增加浏览器的计算负担。例如：

/* 不推荐：嵌套过深且过于具体 */
body div#main .content ul li a:hover { 
  color: red;
}

/* 推荐：简化选择器 */
.content-link:hover {
  color: red;
}

优化原则：

1. 避免超过3层的嵌套
2. 减少通用选择器（*）的使用
3. 优先使用类选择器而非标签或ID选择器
4. 避免使用属性选择器进行频繁匹配

压缩和合并CSS文件

通过工具减少CSS文件体积：

• 使用CSS压缩工具（如cssnano、clean-css）
• 合并多个CSS文件减少HTTP请求
• 开启服务器端Gzip压缩

# 使用cssnano压缩示例
npm install cssnano -g
cssnano input.css output.css

避免使用@import

@import会导致串行加载，阻塞页面渲染：

/* 不推荐 */
@import url("header.css");
@import url("footer.css");

/* 推荐：使用<link>标签并行加载 */
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="footer.css">

使用CSS精灵图

减少图片HTTP请求：

.icon {
  background-image: url("sprites.png");
  background-position: -20px -30px;
  width: 16px;
  height: 16px;
}

合理使用GPU加速

对动画元素启用硬件加速：

.animate-element {
  transform: translateZ(0);
  will-change: transform;
}

注意：

• 不要滥用will-change
• 仅对真正需要动画的元素使用
• 考虑在动画结束后移除相关属性

减少重排和重绘

CSS属性对渲染性能的影响差异：

/* 触发重排的属性（性能开销大） */
element.style.width = "100px";
element.style.height = "100px";

/* 仅触发重绘的属性（性能较好） */
element.style.color = "red";
element.style.backgroundColor = "blue";

/* 最佳实践：使用transform和opacity */
element.style.transform = "scale(1.2)";
element.style.opacity = "0.5";

使用CSS变量替代预处理器变量

原生CSS变量性能更好：

:root {
  --primary-color: #4285f4;
  --spacing-unit: 8px;
}

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

媒体查询优化

按需加载CSS资源：

<link rel="stylesheet" media="(max-width: 600px)" href="mobile.css">
<link rel="stylesheet" media="(min-width: 601px)" href="desktop.css">

删除未使用的CSS

使用工具检测和删除无用CSS：

• PurgeCSS
• UnCSS
• Chrome DevTools的Coverage工具

// PurgeCSS配置示例
module.exports = {
  content: ["*.html"],
  css: ["*.css"]
};

使用contain属性限制渲染范围

.widget {
  contain: layout paint style;
}

预加载关键CSS

<link rel="preload" href="critical.css" as="style">

避免昂贵的CSS属性

某些CSS属性会触发整个页面重排：

/* 昂贵的属性 */
element.style.fontFamily = "Arial";
element.style.boxShadow = "10px 10px 5px #888";

/* 相对廉价的属性 */
element.style.opacity = "0.5";
element.style.transform = "rotate(5deg)";

使用CSS Grid和Flexbox替代传统布局

现代布局方式性能更优：

/* 传统布局（性能较差） */
.float-layout {
  float: left;
  width: 30%;
  margin-right: 3%;
}

/* 现代布局（性能更好） */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

优化字体加载

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-display: swap; /* 避免字体加载阻塞渲染 */
}

减少伪元素的使用

过度使用伪元素会增加DOM复杂性：

/* 不推荐：滥用伪元素 */
.button::before, .button::after {
  content: "";
  display: block;
  position: absolute;
  /* 多个样式声明 */
}

/* 推荐：必要时才使用 */
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  /* 必要的样式 */
}

使用CSS替代JavaScript动画

/* 不推荐：使用JavaScript实现动画 */
element.animate({ opacity: [0, 1] }, 1000);

/* 推荐：使用CSS动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease-in-out;
}

分层渲染策略

.layer-1 {
  z-index: 1;
  will-change: transform;
}

.layer-2 {
  z-index: 2;
  contain: strict;
}

使用CSS containment

.isolated-component {
  contain: content;
}

避免频繁修改样式

批量处理样式变更：

// 不推荐
element.style.width = "100px";
element.style.height = "200px";
element.style.margin = "10px";

// 推荐：使用class或cssText
element.classList.add("new-style");
// 或
element.style.cssText = "width:100px;height:200px;margin:10px;";

响应式图片的CSS实现

.responsive-image {
  background-image: url("small.jpg");
}

@media (min-resolution: 2dppx) {
  .responsive-image {
    background-image: url("large.jpg");
  }
}

使用CSS mask替代图片

.icon {
  background-color: currentColor;
  mask-image: url("icon.svg");
  mask-repeat: no-repeat;
}

优化阴影效果

/* 不推荐：模糊半径过大 */
box-shadow: 0 0 20px rgba(0,0,0,0.5);

/* 推荐：合理控制阴影参数 */
box-shadow: 0 2px 4px rgba(0,0,0,0.1);

减少滤镜使用

/* 昂贵的滤镜效果 */
.filter-heavy {
  filter: blur(5px) drop-shadow(5px 5px 5px #000);
}

/* 性能更好的替代方案 */
.filter-optimized {
  opacity: 0.9;
  transform: translate3d(5px, 5px, 0);
}

使用CSS Scroll Snap

优化滚动性能：

.scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

.scroll-item {
  scroll-snap-align: start;
}

优化打印样式

@media print {
  .no-print {
    display: none;
  }
  
  body {
    background: none;
    color: black;
    font-size: 12pt;
  }
}

使用CSS变量实现主题切换

:root {
  --primary: #4285f4;
  --text: #333;
}

[data-theme="dark"] {
  --primary: #34a853;
  --text: #fff;
}

body {
  color: var(--text);
  background: var(--primary);
}

避免使用表达式

/* 不推荐：使用CSS表达式 */
width: expression(document.body.clientWidth > 800 ? "800px" : "auto");

/* 推荐：使用媒体查询 */
@media (min-width: 800px) {
  .element {
    width: 800px;
  }
}

使用CSS替代图片

/* 不推荐 */
background: url("gradient.jpg");

/* 推荐 */
background: linear-gradient(to right, #ff9966, #ff5e62);

优化表格布局

table {
  table-layout: fixed; /* 提升渲染性能 */
  width: 100%;
}

使用content-visibility

.long-list {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

减少z-index使用

/* 不推荐：随意设置高z-index值 */
.modal {
  z-index: 9999;
}

/* 推荐：建立z-index层级系统 */
:root {
  --z-base: 1;
  --z-overlay: 10;
  --z-modal: 100;
}

.modal {
  z-index: var(--z-modal);
}

使用CSS替代SVG图标

.menu-icon {
  width: 24px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
}

.menu-icon::before {
  top: -8px;
}

.menu-icon::after {
  top: 8px;
}