同事问我为什么上级喊他把js实现改成css

news2025/8/8 17:28:54

文章目录

  • 页面绘制流程
  • CSS3动画
    • 优点
    • 缺点
  • JS动画
    • 优点
    • 缺点
  • 总结

本人不是专门写前端的,所以可能有不合理的地方,建议您多搜几篇博客看一下。

页面绘制流程

渲染流程主要有4个步骤

  1. 解析 HTML 生成DOM 树
  2. 解析 CSS 样式生成 CSSOM 树,CSSOM 树与 DOM 树结合生成 Render tree
  3. 布局 Render Tree 对每个节点进行布局处理,确定在屏幕上的位置
  4. 绘制 Render Tree,遍历渲染树将每个节点绘制出来
    在这里插入图片描述
    为了优化用户体验,渲染引擎不会等到 HTML 解析完才创建布局渲染树

CSS3动画

CSS3 动画也被称为补间动画,原因是只需要添加关键帧的位置,其他的未定义的帧会被自动生成

优点

浏览器可以对动画进行优化
帧速不好的浏览器,CSS3 可以自然降级兼容
代码简单,调优方向固定

缺点

无法精准的控制动画,无法实现一些复杂的动画

JS动画

JS 动画是逐帧动画,在时间帧上绘制内容,一帧一帧的,所以他的可再造性很高,几乎可以完成任何你想要的动画形式。

但是由于逐帧动画的内容不一样,会增加制作的负担,占用比较大的资源空间。

优点

可控性高,可以实现炫酷高级的动画

缺点

逐帧动画占用比较大的资源空间

总结

因为我同事写的页面属于比较简单的静态页面,动画简单,所以我推荐他听上级的,改成CSS实现。

如果是高级的动画效果,可能还是js来的好一点。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/34279.html

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

相关文章

Verilog 条件语句

link 我用的是 vivado 21 秒学会 vivado 仿真 关键词:if,选择器 条件语句 条件(if)语句用于控制执行语句要根据条件判断来确定是否执行。 条件语句用关键字 if 和 else 来声明,条件表达式必须在圆括号中。 条件语句使…

【网络篇】第十六篇——再谈端口号

再谈端口号 端口号范围划分 认识知名端口号 两个问题 netstat pidof 再谈端口号 端口号(Port)标识了一个主机上进行通信的不同的应用程序; 从网络中获取的数据在进行向上交付时,在传输层就会提取出该数据对应的目的端口号,进而确定该数据…

159-170-Hadoop-调优-hdfs-yran-综合

159-Hadoop-调优-hdfs故障排查: HDFS**—故障排除**(此处了解,一般使用HA) NameNode 故障处理 1)需求: NameNode 进程挂了并且存储的数据也丢失了,如何恢复 NameNode 2)故障模拟…

42、集合的第一大类:List

一、基本介绍: 1、List接口和常用方法 (1)List接口基本介绍: List接口是Collection接口的子接口 1)List集合类中元素有序(即添加顺序和取出顺序一致),且可重复 2)Li…

第五章TCP/IP 我们网络在我们身边

个人简介:云计算网络运维专业人员,了解运维知识,掌握TCP/IP协议,每天分享网络运维知识与技能。个人爱好: 编程,打篮球,计算机知识个人名言:海不辞水,故能成其大;山不辞石…

GOT Online For Unreal | 支持GPU Counter、DrawCall和Triangle、功率

UWA GOT Online For Unreal 新功能上线,马上分享: 在GOT Online - Overview模式中,新增了GPU Counter、DrawCall、Triangle和功率数据采集等,同时也对新增了便于报告上传和查看的API接口,以便开发者在查看报告时可以更…

计算机组成原理4小时速成:存储器容量扩展:位扩展,字扩展,存储器与cpu链接,地址线,数据线,片选线,控制线,汉明码编码,奇偶校验

计算机组成原理4小时速成:存储器容量扩展:位扩展,字扩展,存储器与cpu链接,地址线,数据线,片选线,控制线,汉明码编码,奇偶校验 2022找工作是学历、能力和运气…

[附源码]java毕业设计游戏装备交易网站论文2022

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

项目管理中,如何应对需求蔓延?

项目管理中,需求蔓延几乎难以避免,控制不好所产生的后果不言而喻,轻则增加工作量,造成项目延期;重则导致方案不完善,导致交付质量难以保证,使项目失败,因此我们要做好充分的准备。 …

硬盘分区管理软件,硬盘分区软件哪个好用

磁盘分区是很高频的磁盘管理方式,但是,很多的用户又不知道磁盘分区,只能借助于专业的磁盘分区大师。那么,在本文中,易我小编将讲解磁盘分区的知识,并且为大家介绍一款超实用的硬盘分区管理软件。 一、电脑磁…

基于fastai 1.0.61的SSD目标检测算法 代码详解 (一)

基于fastai的目标检测算法,主要是2018年course ① 2018 coursev2 : https://nbviewer.org/github/fastai/fastai1/tree/master/courses/ pascal.ipynb pacal_multi.ipynb SSD② jav fastai1.x SSD 没有mAP: https://github/jav0927/course-v3/blob/…

41、集合

一、基本介绍: 1、引入: (1)前面我们保存多个数据使用的是数组,但数组不足的地方有: 1)长度开始时必须指定,而且一旦指定,不能更改 2)保存的必须为同一类…

最新uniApp微信小程序获取头像open-type=“chooseAvatar“ @chooseavatar方法

小程序用户头像昵称获取规则调整公告 调整说明 自 2022 年 10 月 25 日 24 时后(以下统称 “生效期” ),用户头像昵称获取规则将进行如下调整: 自生效期起,小程序 wx.getUserProfile 接口将被收回:生效期…

maven学习:继承与聚合

4.1继承 ​ 做面向对象编程的人都会觉得这是一个没意义的问题,是的,继承就是避免重复,maven的继承也是这样,它还有一个好处就是让项目更加安全. 我们在项目开发的过程中,可能多个模块独立开发,但是多个模块…

【面试宝典】Java八股文之Redis面试题

Redis面试题1、什么是 Redis?2、Redis 与其他 key-value 存储有什么不同?3、Redis 的数据类型?4、使用 Redis 有哪些好处?5、Redis 相比 Memcached 有哪些优势?6、Memcache 与 Redis 的区别都有哪些?7、Redis 是单进程单线程的?8、一个字符串类型的值能存储最大容量是多…

利用FME读取Word中的表格

利用FME的MSWordStyler转换器和Word写模块,我们可以将一些简单的文本和表格写出到Word文档格式中,转换器和写模块截图如下: 图1 MSWordStyler转换器 图2 Word写模块 FME目前还没有Word读模块可以直接读取和解析Word格式,今天我们给…

java基本语法 上

目录 关键字与保留字 关键字(keyword)的定义和特点 保留字 标识符 Java中的名称命名规范 变量 变量的定义 变量的分类 整数类型:byte、short、int、long 浮点类型:float、double 字符类型:char 布尔类型:boolean 字符…

【亲测】网址引导页管理系统

介绍: 易航网址引导系统-网址引导页管理系统去授权版一款极其优雅的易航网址引导页管理系统, 如果有问题可以跟我反馈,共同进步。祝各位道友一路飞升,顶峰相见!内置12套模板和防墙插件。 项目亮点: 1、…

国产无线蓝牙耳机哪个好?性价比高的国产耳机品牌

目前市面上的无线蓝牙耳机品类众多,面对琳琅满目的无线蓝牙耳机,很多人一时之间无从下手,国产的产品越做越好,很多爱国人士纷纷支持自家品牌,因此小编根据蓝牙耳机热卖榜,给大家整理了一期性价比高的蓝牙耳…

Spring Boot + Activiti 完美结合,快速实现工作流~

概念 工作流。通过计算机对业务流程自动化执行管理,主要解决的是“使在多个参与者之间按照某种预定义的规则自动进行传递文档、信息或任务的过程,从而实现某个预期的业务目标,或者促使此目标的实现”。 Activiti7 介绍 Activiti是一个工作…