面试题：CSS 动画与过渡的性能优化

可能导致性能问题的因素

重排与重绘：
- 当动画或过渡改变元素的布局属性（如width、height、margin等）时，会触发重排，浏览器需要重新计算元素的几何属性和位置。
- 改变元素的视觉属性（如color、background - color等）会触发重绘，浏览器需要重新绘制元素。频繁的重排和重绘会消耗大量性能。
GPU 过载：
- 如果动画涉及大量复杂的 3D 变换或过度使用滤镜等效果，GPU 可能会过载。例如，在一个页面上有多个元素同时进行复杂的 3D 旋转动画，GPU 可能无法高效处理，导致卡顿。
动画数量过多：
- 页面上同时运行大量的 CSS 动画和过渡，会占用过多的系统资源。比如，一个页面上有上百个元素都在进行不同的动画，会使浏览器性能下降。

优化策略

避免触发重排和重绘：
- 尽量使用transform和opacity来创建动画，因为这两个属性不会触发重排和重绘，而是由合成线程直接处理。例如，要实现元素的淡入效果，使用opacity而不是visibility（visibility的显示隐藏切换会触发重排）。
- 批量修改元素样式，而不是多次单独修改。比如：

/* 假设我们要修改一个元素的多个样式 */
.element {
    /* 初始样式 */
    width: 100px;
    height: 100px;
    background - color: red;
}
/* 创建一个新的类用于动画修改 */
.element - animated {
    width: 200px;
    height: 200px;
    background - color: blue;
    transform: translateX(100px);
}

<div class="element"></div>
<script>
    const element = document.querySelector('.element');
    // 一次性添加新类，而不是逐个修改样式属性
    element.classList.add('element - animated');
</script>

合理利用 GPU：
- 对于复杂的动画，使用will - change属性提前告知浏览器即将发生的变化，让浏览器提前准备，优化渲染。例如，当元素即将进行 3D 变换时：

.element {
    will - change: transform;
}

避免过度使用复杂的 3D 效果和滤镜。如果必须使用，限制在少数关键元素上，并且尽量简化效果。

控制动画数量：
- 减少不必要的动画，对于一些对用户体验提升不大的动画可以考虑移除。
- 对于需要大量元素进行动画的场景，可以采用分批加载或延迟加载动画的策略。例如，使用 JavaScript 控制动画的启动时机，当元素进入视口时才开始动画：

<div class="element" data - animation - class="element - animated"></div>
<script>
    const elements = document.querySelectorAll('.element');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const element = entry.target;
                element.classList.add(element.dataset.animationClass);
                observer.unobserve(element);
            }
        });
    });
    elements.forEach(element => {
        observer.observe(element);
    });
</script>

优化关键帧动画：
- 在关键帧动画中，减少关键帧的数量。例如，如果一个动画从开始到结束只需要简单的起始和结束状态，就不需要设置过多的中间关键帧。

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

合理设置动画的时间函数（easing - function）。避免使用过于复杂的自定义时间函数，优先选择浏览器内置的简单且高效的时间函数，如ease - in - out、linear等。

.element {
    animation: slideIn 2s ease - in - out;
}

面试题：CSS 动画与过渡的性能优化

知识考点

面试题答案

可能导致性能问题的因素

优化策略