当前位置: 首页 > article >正文

CSS浅谈动画性能

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

文章目录

  • 目的
  • 一、举个栗子
  • 二、性能分析
    • 1.从图层分析
    • 2.性能分析
  • 总结


目的

为了探究使用动画时,『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


http://www.kler.cn/a/154591.html

相关文章:

  • 要查看你的系统是 x64(64位)还是 x86(32位),可以按照以下步骤操作
  • mindspore发布件
  • MySQL技巧之跨服务器数据查询:基础篇-A数据库与B数据库查询合并
  • STM32寄存器结构体详解
  • HBuilder(uniapp) 配置android模拟器
  • 【机器学习】机器学习中用到的高等数学知识-1.线性代数 (Linear Algebra)
  • 密码学学习笔记(二十二):RSA签名方案
  • CC2530basic_Rf串口无线收发
  • [蓝桥杯 2020 省 AB1] 解码
  • 已解决AttributeError: module ‘gradio‘ has no attribute ‘outputs‘
  • Java集合类的重要性
  • 误用STM32串口发送标志位 “USART_FLAG_TXE” “USART_FLAG_TC”造成的BUG
  • GPT实战系列-大模型训练和预测,如何加速、降低显存
  • 【涨薪技术】深入接口测试之Mock技术
  • 关于STM32G0 FLASH 写入时出现PGSERR的一种处理办法
  • n个整数存放在一个一维数组A中,任选一种程序设计语言,编写一个函数,利用递归的方法,求数组中各整数的平均值
  • 状态模式-C++实现
  • 使用java批量生成Xshell session(*.xsh)文件
  • Unity对接后台和加载图片
  • 4.4-Docker bridge0详解
  • oracle FUNCTION(任意两个时间 之间的工作小时)
  • 游戏被流量攻击会有什么样的影响,该用什么样的防护方式去处理
  • 07-原型模式-C语言实现
  • 2022年9月6日 Go生态洞察:Go的漏洞管理新支持
  • 基于Cocos2D-X框架闯关游戏的设计
  • acwing算法基础之贪心--排序不等式、绝对值不等式和推公式