CSS浅谈动画性能

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

目的

为了探究使用动画时，『transform』和『width、height、margin等』的差异

---

一、举个栗子

示例代码：使用width、height & 使用transform的scale缩放

<template>
  <div class="container">
    <div class="content">
      <div :class="['box', { 'isCurrent': item === current }]" v-for="item in 10">
        {{ item }}
      </div>
    </div>
    <div class="content">
      <div :class="['box', { 'isBCurrent': item === bCurrent }]" v-for="item in 10">
        {{ item }}
      </div>
    </div>
    <div class="btn-box">
      <button @click="toScroll">
        宽高启动
      </button>
      <button @click="toBScroll" style="margin:0 10px;">
        缩放启动
      </button>
    </div>

  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
let current = ref(0)
const toScroll = () => {
  let timer = setIntervalÏ(() => {
    if (current.value < 11) {
      current.value++
    } else {
      clearInterval(timer)
      current.value = 0
    }
  }, 500)
}

let bCurrent = ref(0)
const toBScroll = () => {
  let timer = setInterval(() => {
    if (bCurrent.value < 11) {
      bCurrent.value++
    } else {
      clearInterval(timer)
      bCurrent.value = 0
    }
  }, 500)
}

</script>
<style lang="scss">
.container {
  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;

    .box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;

      margin: 50px;
    }

    .isCurrent {
      width: 100px;
      height: 100px;

      transition: all 10s ease;
      background-color: red;
    }

    .isBCurrent {
      transform: scale(2);

      transition: all 10s ease;
      background-color: blue;
    }
  }
  .btn-box {
    display: flex;
    justify-content: flex-end;
  }
}
</style>

二、性能分析

1.从图层分析

下面是从图层的绘制次数可清楚看到区别：


从图层的角度来看，使用CSS的transition属性来改变元素的宽高与直接改变元素的宽高（不使用transition）有以下区别：

1. 图层动画与重绘：
   ○ 使用transition的动画效果可以触发硬件加速（在支持的浏览器上），将动画过程中的元素提升到一个单独的复合图层（compositing layer）。这意味着浏览器可以使用GPU加速动画的渲染，从而提高性能。
   ○ 直接改变宽高，尤其是在没有使用transition的情况下，可能会导致频繁的重绘（repaint）和重排（reflow）。每次元素的尺寸改变，浏览器都必须重新计算元素的几何位置和其余页面布局，然后重新绘制影响的部分，这可能导致性能问题。
2. 渲染管线：
   ○ 使用transition时，浏览器可以优化渲染管线，预先知道会有一个持续的变化，因此可以更好地调度资源和时间。
   ○ 没有transition的直接宽高调整，则是立即生效的，浏览器需要即时处理这些变更，没有过渡效果，可能导致用户体验不够平滑。
3. 图层创建与管理：
   ○ transition动画在进行时，如果触发了图层的创建，那么在动画结束后，浏览器可能会将该图层合并回主图层以节省资源，这个过程是自动且对用户透明的。
   ○ 直接改变宽高，不涉及图层的额外管理，也就没有额外的图层优化机会。
4. 渲染后的页面复杂性：
   ○ 使用transition可能会临时增加页面的复杂性，因为它添加了动态变化的图层。但这通常是短暂的，并且在动画结束后，页面可能会恢复到较少的图层。
   ○ 直接改变宽高对页面的图层复杂性影响较小，因为它不会引入额外的动态变化。

2.性能分析

性能分析总耗时：

性能比较

总结

优先使用transform，而不是使用width&height

推荐文章： https://mp.weixin.qq.com/s?__biz=Mzk0NTI2NDgxNQ==&mid=2247484939&idx=1&sn=229467c549cec5e3980671f488a4d89e&chksm=c31947cbf46ecedd13f930b44e9bc2a25ce706a8d30fce56c54584598015640338a6e075b8ff#rd