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.mzph.cn/news/191090.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【1】基于多设计模式下的同步异步日志系统

1. 项目介绍 本项⽬主要实现⼀个⽇志系统&#xff0c; 其主要⽀持以下功能: • ⽀持多级别⽇志消息 • ⽀持同步⽇志和异步⽇志 • ⽀持可靠写⼊⽇志到控制台、⽂件以及滚动⽂件中 • ⽀持多线程程序并发写⽇志 • ⽀持扩展不同的⽇志落地⽬标地 2. 开发环境 • CentOS 7 • vs…

Prism.js实现代码高亮并添加行号

先上效果: Prism.js Prism 是一款轻量、可扩展的代码语法高亮库&#xff0c;使用现代化的 Web 标准构建。 使用 Prismjs 可以快速为网站添加代码高亮功能&#xff0c;支持超过113中编程语言&#xff0c;还支持多种插件&#xff0c;是简洁、高效的代码高亮解决方案。 为什么选…

C++跨目录include问题

不同文件夹下使用预处理器指示符#include 使用举例 假设我们有如下一个工程&#xff0c;其中包含了几个源代码和头文件&#xff0c;其中main.cpp是主源代码文件&#xff0c;里面含有main函数&#xff1a; 在foldder main中包含&#xff1a;func4.hpp&#xff0c;func4.cpp&am…

1.0 十大经典排序算法

分类 算法 本系列算法整理自&#xff1a;https://github.com/hustcc/JS-Sorting-Algorithm 同时也参考了维基百科做了一些补充。 排序算法是《数据结构与算法》中最基本的算法之一。 排序算法可以分为内部排序和外部排序&#xff0c;内部排序是数据记录在内存中进行排序&#…

Python遥感开发之批量镶嵌

Python遥感开发之批量镶嵌 0.ArcGis镶嵌1.Arcpy实现镶嵌1.1 Arcpy实现单个镶嵌1.2 Arcpy实现批量镶嵌 2.GDAL实现镶嵌 前言&#xff1a;主要介绍了遥感数据的镶嵌&#xff0c;其中包括使用ArcGis如何完成镶嵌&#xff0c;如何使用Arcpy和GDAL完成镶嵌。 0.ArcGis镶嵌 是ArcGis…

PyLMKit(2):快速开始大模型应用开发

快速开始 GitHub&#xff1a;https://github.com/52phm/pylmkitPyLMKit 官方教程 PyLMKit应用&#xff08;online application&#xff09;English document中文文档 0.下载安装 pip install -U pylmkit --user1.设置 API KEY 一个方便的方法是创建一个新的.env文件&#…

mysql中int(10)和char(10),varchar(10)区别是什么?

整体对比表格 int(10)char(10)varchar(10)存储方式二进制整数字符集编码的字符串字符集编码的字符串存储空间固定为4字节固定为10字节根据实际使用长度变化&#xff0c;通常更小存储内容整数字符串(用空格填充)字符串(不需要填充)比较大小整数的比较字符串的字典序比较字符串的…

物流单管理系统软件物流单打印,物流单打印模板,佳易王物流快运单管理软件下载

物流单管理系统软件物流单打印&#xff0c;物流单打印模板&#xff0c;佳易王物流快运单管理软件下载 软件试用版下载或技术支持可以点击最下方官网卡片 上图&#xff1a;在物流开单时&#xff0c;可以先输入电话&#xff0c;如果之前存在该托运人信息&#xff0c;则可以一键…

高德Map

使用 官网&#xff1a;JS API 结合Vue使用 npm i amap/amap-jsapi-loader --saveimport AMapLoader from amap/amap-jsapi-loader;marker的属性、事件、方法 https://lbs.amap.com/api/javascript-api-v2/documentation#marker 自定义marker 为创建的 Marker 指定自定义图…

Motion 5 for Mac,释放创意,打造精彩视频特效!

Motion 5 for Mac是一款强大的视频后期特效处理软件&#xff0c;为Mac用户提供了无限的创意可能性。无论你是专业的影视制作人&#xff0c;还是想为个人视频添加独特特效的爱好者&#xff0c;Motion 5都能满足你的需求&#xff0c;让你的视频脱颖而出。 Motion 5提供了丰富多样…

【滑动窗口】将X减到0的最小操作数

将X减到0的最小操作数 1658. 将 x 减到 0 的最小操作数 - 力扣&#xff08;LeetCode&#xff09; 文章目录 将X减到0的最小操作数题目描述算法原理代码编写Java代码编写C代码编写 题目描述 给你一个整数数组 nums 和一个整数 x 。每一次操作时&#xff0c;你应当移除数组 num…

webGIS使用JS,高德API完成的智慧校园项目路径规划

代码实现&#xff1a; //通过geojson对象来管理覆盖物&#xff0c;显示点geojson.addOverlay(marker)//保存数据&#xff08;将geojson对象转换成标准的GeoJSON格式对象&#xff09;saveData(geojson.toGeoJSON())})//从localstroage中读取数据function getData(){if(!localSto…

【HarmonyOS开发】ArkTs编译为SO包的流程记录

1、创建一个Static Library的静态模块 2、编写我们的SO控件 2.1 编译配置 {"apiType": "stageMode","buildOption": {"artifactType": "obfuscation"},"targets": [{"name": "default",&qu…

【FISCO BCOS】二十、多机部署区块链

目录 一、准备环境 二、开始搭建 三、检查节点 1.检查节点进程

Linux:查看端口占用的进程

命令 netstat -tunlp可以从图中看到&#xff0c;端口被那个进程占用&#xff0c;对应进程的pid是多少。

dart语言多线程遇到的问题:Isolate.spawnUri(),在真机调试中无法生成隔离

报错原因 [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: IsolateSpawnException: Unable to spawn isolate: Unsupported isolate URI: 未处理的异常&#xff1a;IsolateSpawnException&#xff1a;无法生成隔离&#xff1a;不支持隔离 URI&…

基于eBPF实现监控ssh登陆功能

以下是一个基于eBPF监控SSH登录的程序的示例代码&#xff0c;使用Python编写&#xff1a; python import os import ctypes from bcc import BPF # eBPF程序 bpf_text """ #include <uapi/linux/ptrace.h> #include <linux/sched.h> struct ssh…

递归实例化导致的栈溢出问题【简直蠢得出奇】

问题描述 今天在练习数据库增删改查&#xff0c;体验三层架构思想时&#xff0c;随便写了点DAO层代码&#xff0c;但服务器运行时竟然爆出了栈溢出的问题&#xff0c;说实话&#xff0c;空指针问题我还能放着耐心去代码里找找问题&#xff0c;但这个栈溢出&#xff0c;我之前就…

Vue学习笔记-Vuex基本使用

基本使用 初始化数据、配置actions、mutations&#xff0c;操作文件/store/index.js //index.js文件用于创建Vuex中最为核心的store对象 import Vue from vue import Vuex from vuex Vue.use(Vuex) //actions对象用于响应组件中的动作,专门负责业务逻辑 const actions {//函数…

Jetson Nano部署YOLOv5与Tensorrtx加速

一、烧录镜像 1、Jetson Nano烧写系统镜像 Jetson Nano是一款形状、外接口类似于树莓派的嵌入式主板&#xff0c;搭载了四核Cortex-A57处理器&#xff0c;GPU则是拥有128个NVIDIA CUDA核心的NVIDIA Maxwell架构显卡&#xff0c;内存为4GB的LPDDR4&#xff0c;存储则为16GB eM…