面试题：CSS自定义属性与动画性能调优

CSS自定义属性（变量）在大型项目中的应用场景和优势

应用场景
- 主题切换：在大型项目中，可能需要多种主题，如白天和夜间模式。通过CSS自定义属性，可以轻松实现主题切换。例如：

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}
body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

切换主题时，只需修改:root中自定义属性的值。 - 全局样式管理：统一管理项目中重复出现的样式，如字体大小、颜色、间距等。当需要修改某个样式时，只需在自定义属性定义处修改，无需逐个修改使用该样式的地方。例如：

:root {
  --font-size-base: 16px;
}
body {
  font-size: var(--font-size-base);
}
h1 {
  font-size: 2em; /* 基于var(--font-size-base) */
}

- **组件化开发**：在组件库开发中，自定义属性可以让组件具有更高的可定制性。例如，一个按钮组件可以通过自定义属性来改变其颜色、大小等。

.button {
  background-color: var(--button-bg-color, #007bff);
  color: var(--button-text-color, white);
}

优势
- 提高代码可维护性：如上述提到的，一处修改，全局生效，减少代码冗余，方便维护。
- 增强代码可读性：自定义属性命名通常更具描述性，使代码意图更清晰。例如var(--primary-color)比直接写颜色值更易理解。
- 动态性和灵活性：可以通过JavaScript动态修改自定义属性的值，实现更灵活的交互效果。例如，用户调整浏览器窗口大小时，动态改变某些元素的布局相关的自定义属性值。

在创建复杂动画效果时优化动画性能的方法及原理

利用GPU加速
- 原理：GPU（图形处理单元）专门用于处理图形相关任务，比CPU更适合处理复杂的图形渲染和动画。通过将动画元素从CPU渲染转移到GPU渲染，可以显著提高性能。
- 实现方法：
  - 使用transform和opacity属性：这两个属性的动画通常会触发GPU加速。例如：

.element {
  animation: move 5s ease;
}
@keyframes move {
  from {
    transform: translateX(0);
    opacity: 0;
  }
  to {
    transform: translateX(500px);
    opacity: 1;
  }
}

    - **使用`will-change`属性**：提前告知浏览器元素属性将要改变，让浏览器提前优化。例如：

.element {
  will-change: transform;
  animation: rotate 3s infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

其他优化手段
- 减少重排和重绘
  - 原理：重排（reflow）是指浏览器重新计算元素的几何属性，重绘（repaint）是指重新绘制元素的外观。频繁的重排和重绘会降低性能。
  - 实现方法：避免在动画过程中修改元素的布局属性（如width、height、padding等），尽量使用transform和opacity。如果必须修改布局属性，可以将元素脱离文档流（如使用position: absolute或position: fixed），修改完成后再恢复，这样可以减少对其他元素的影响，降低重排范围。
- 控制动画帧率
  - 原理：过高的帧率可能会导致性能问题，尤其是在性能较差的设备上。适当降低帧率可以平衡性能和动画流畅度。
  - 实现方法：可以通过requestAnimationFrame函数来控制动画帧率，它会在浏览器下一次重绘之前调用指定的回调函数，通常为每秒60次（与屏幕刷新率匹配）。例如：

function animate() {
  // 动画逻辑
  requestAnimationFrame(animate);
}
animate();

- **使用硬件加速的动画库**：如GSAP（GreenSock Animation Platform），它在底层对动画进行了优化，能够更好地利用GPU加速和其他性能优化技术，简化复杂动画的开发同时提高性能。例如：

import gsap from 'gsap';
const element = document.querySelector('.element');
gsap.to(element, { x: 500, duration: 3, ease: 'power1.out' });

星途面试题库

面试题：CSS自定义属性与动画性能调优

知识考点

面试题答案

CSS自定义属性（变量）在大型项目中的应用场景和优势

在创建复杂动画效果时优化动画性能的方法及原理