面试题：JavaScript优化复杂CSS布局动画的实现与性能考量

实现思路

动画方法选择
- CSS transition：适用于简单的状态过渡，如元素从一种样式到另一种样式的平滑变化，例如淡入淡出（通过改变opacity属性）。它语法简单，浏览器能高效渲染，因为浏览器可以利用GPU加速。
- CSS animation：适合更复杂的、有多个关键帧的动画，像缩放和移动这类涉及多步变化的动画。同样能利用GPU加速，性能较好。
- JavaScript操作：在需要动态控制动画，比如根据用户交互或复杂逻辑来触发动画时使用。但直接操作CSS属性可能导致重排重绘，影响性能，所以尽量结合CSS的will-change属性提前告知浏览器即将变化的属性，让浏览器提前优化。
动画触发和结束事件处理
- 触发：可以通过用户交互事件（如点击、滚动）来触发动画。在JavaScript中，使用addEventListener来监听这些事件。例如，监听一个按钮的点击事件来触发某个元素的动画。
- 结束事件：对于CSS动画和过渡，可以监听animationend和transitionend事件。在事件回调函数中，可以执行一些后续操作，比如改变元素的状态，或者触发下一个动画。
性能监测和优化
- 性能监测：使用浏览器的开发者工具（如Chrome DevTools）中的Performance面板，可以记录动画过程中的性能数据，查看是否有长时间的任务、重排重绘次数等。
- 优化：
  - 减少重排重绘：避免在动画过程中频繁改变元素的布局相关属性（如width、height、margin等）。如果必须改变，可以先改变元素的display为none，进行一系列属性修改后再恢复显示。
  - 利用requestAnimationFrame：在JavaScript操作动画时，使用requestAnimationFrame来控制动画的帧率，使其与浏览器的刷新率同步，避免过度绘制。
  - 使用GPU加速：尽量使用CSS的transform和opacity属性来实现动画，因为这些属性可以触发GPU加速。

关键JavaScript代码示例

使用CSS transition实现淡入淡出，并通过JavaScript触发

<style>
   .fade - element {
      opacity: 0;
      transition: opacity 1s ease - in - out;
   }
   .fade - element.fade - in {
      opacity: 1;
   }
</style>
<div class="fade - element" id="fadeDiv">淡入淡出元素</div>
<button onclick="fadeIn()">淡入</button>
<script>
   function fadeIn() {
      const fadeDiv = document.getElementById('fadeDiv');
      fadeDiv.classList.add('fade - in');
      fadeDiv.addEventListener('transitionend', function () {
         // 动画结束后可执行的操作
         console.log('淡入动画结束');
      });
   }
</script>

使用CSS animation实现缩放和移动，并通过JavaScript触发

<style>
   @keyframes scaleAndMove {
      from {
         transform: scale(1) translateX(0);
      }
      to {
         transform: scale(1.5) translateX(100px);
      }
   }
   .scale - move - element {
      animation: scaleAndMove 2s ease - in - out;
   }
</style>
<div class="scale - move - element" id="scaleMoveDiv">缩放移动元素</div>
<button onclick="startScaleAndMove()">开始动画</button>
<script>
   function startScaleAndMove() {
      const scaleMoveDiv = document.getElementById('scaleMoveDiv');
      scaleMoveDiv.addEventListener('animationend', function () {
         // 动画结束后可执行的操作
         console.log('缩放移动动画结束');
      });
   }
</script>

使用JavaScript和requestAnimationFrame实现简单动画（以移动元素为例）

<style>
   #move - element {
      position: relative;
      left: 0;
   }
</style>
<div id="move - element">移动元素</div>
<button onclick="startMove()">开始移动</button>
<script>
   function startMove() {
      const moveElement = document.getElementById('move - element');
      let position = 0;
      const targetPosition = 200;
      const move = function () {
         if (position < targetPosition) {
            position += 5;
            moveElement.style.left = position + 'px';
            requestAnimationFrame(move);
         }
      };
      requestAnimationFrame(move);
   }
</script>

星途面试题库

面试题：JavaScript优化复杂CSS布局动画的实现与性能考量

知识考点

面试题答案

实现思路

关键JavaScript代码示例