目录
1. 浏览器的渲染流程
2. 回流和重绘
3. CSS3 动画
4. JS 动画
5. CSS 动画与 JS 动画对比
首页 web前端 前端问答 css3的动画性能为什么高

css3的动画性能为什么高

Jan 20, 2022 am 10:56 AM
css3动画

性能高的原因:1、css是关键帧动画,补间动画部分由浏览器完成,浏览器可以对动画进行优化;2、代码简单,性能调优方向固定;3、CSS动画运行在合成线程中,不会阻塞主线程,并且在合成线程中完成的动作不会触发回流和重绘,因而其渲染成本小。

css3的动画性能为什么高

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

1. 浏览器的渲染流程

渲染流程主要有4个步骤

  • 解析 HTML 生成DOM 树

  • 解析 CSS 样式生成 CSSOM 树,CSSOM 树与 DOM 树结合生成 Render tree

  • 布局 Render Tree 对每个节点进行布局处理,确定在屏幕上的位置

  • 绘制 Render Tree,遍历渲染树将每个节点绘制出来

为了优化用户体验,渲染引擎不会等到 HTML 解析完才创建布局渲染树

生成 DOM 树

DOM 树的构建是一个深度遍历过程,也就是说只有在所有子节点都构建好后才会去构建当前节点的下一个兄弟节点

生成 Render 树

生成 DOM 树的同时会生成 CSSOM 树,根据 CSSOM 和 DOM 树构建 Render Tree,渲染树包括颜色,尺寸等显示属性的矩形

DOM 树和 Render 树

1.png

2. 回流和重绘

CSS 中至关重要的概念

回流

回流也叫重排,指几何属性需要改变的渲染。

每一次的回流都会将网页内容重新渲染,只是我们人眼感觉不到有任何变化,但是它确实是会清空页面的,再从页面的左上角的第一个像素点从左到右从上到下这样一点一点渲染,每次回流都会是这样的过程,只是感觉不到而已

渲染树的节点发生改变,影响了该节点的几何属性,导致该节点位置发生变化,此时就会触发浏览器回流并重新生成渲染树。

常见的几何属性:布局,尺寸这些可以用尺子量出来的属性

  • display、float、grid
  • width、padding

重绘

重绘指更改外观属性而不影响集合属性的渲染,类似于颜色这些。相比于回流,重绘的作用不会那么强烈。

渲染树的节点发生改变,但不影响该节点的集合属性,回流对浏览器性能的消耗是远大于重绘的。并且回流就必然带来重绘,重绘不一定需要回流

外观属性

  • clip,background
  • text

在介绍完这些知识后我们来聊聊 CSS 动画

3. CSS3 动画

这里我们只谈论 CSS3 的动画

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

因为我们只设置了几个关键帧的位置,所以在进行动画控制的时候比较困难,不能再半路暂停动画,或者在动画过程中添加一些其他操作,都不大容易

但是 CSS 动画也有很多的好处

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

4. JS 动画

首先,JS 动画是逐帧动画,在时间帧上绘制内容,一帧一帧的,所以他的可再造性很高,几乎可以完成任何你想要的动画形式。但是由于逐帧动画的内容不一样,会增加制作的负担,占用比较大的资源空间。

但是它也有很多的优势

  • 细腻的动画
  • 可控性高
  • 炫酷高级的动画

5. CSS 动画与 JS 动画对比

前面关于 CSS 动画和 JS 动画,都是一些概念性比较强的东西,不看也罢

说了这么多,到底为什么CSS动画要更高效呢?

第一点

从实现动画的复杂度来看,CSS 动画大多数都是补间动画,而 JS 动画是逐帧动画。当然这里我们不谈论实现的效果

第二点

编码的高效,采用 JS 去实现的动画,无论多简单的动画,都需要去控制整个过程,当然你可能会说可以采用一些库来解决这些问题,但是这些库的实际运行可能要比原生实现的效率要低的多

第三点

性能的高效,在我们前面讲到了回流和重绘,如果我们要操作一个元素向右移动,我们可能需要控制 dom.style.left 属性,每次来改变元素的位置,而结合我们所说的,几何属性的改变必然会引起回流,回流必然引起重绘,可想而知如果我们采用 JS 来实现动画,这个代价有多大,这会造成浏览器在不断的计算页面,从而导致浏览器内存堆积。同时由于 JavaScript 运行在浏览器的主线程中,主线程中还有其他的重要任务在运行,因而可能会受到干扰导致线程阻塞,从而丢帧

而 CSS 的动画是运行在合成线程中的,不会阻塞主线程,并且在合成线程中完成的动作不会触发回流和重绘

当然还有一个重要的点:JS 动画运行在 CPU,而 CSS 动画运行在 GPU

总的来说, CSS动画的渲染成本小,并且它的执行效率高于 JavaScript 动画

(学习视频分享:css视频教程

以上是css3的动画性能为什么高的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

什么是使用效果?您如何使用它执行副作用? 什么是使用效果?您如何使用它执行副作用? Mar 19, 2025 pm 03:58 PM

本文讨论了React中的使用效应,这是一种用于管理副作用的钩子,例如数据获取和功能组件中的DOM操纵。它解释了用法,常见的副作用和清理,以防止记忆泄漏等问题。

解释懒惰加载的概念。 解释懒惰加载的概念。 Mar 13, 2025 pm 07:47 PM

懒惰加载延迟内容的加载直到需要,从而通过减少初始加载时间和服务器加载来改善Web性能和用户体验。

JavaScript中的高阶功能是什么?如何使用它们来编写更简洁和可重复使用的代码? JavaScript中的高阶功能是什么?如何使用它们来编写更简洁和可重复使用的代码? Mar 18, 2025 pm 01:44 PM

JavaScript中的高阶功能通过抽象,常见模式和优化技术增强代码简洁性,可重复性,模块化和性能。

咖喱如何在JavaScript中起作用,其好处是什么? 咖喱如何在JavaScript中起作用,其好处是什么? Mar 18, 2025 pm 01:45 PM

本文讨论了JavaScript中的咖喱,这是一种将多重题材函数转换为单词汇函数序列的技术。它探讨了咖喱的实施,诸如部分应用和实际用途之类的好处,增强代码阅读

反应和解算法如何起作用? 反应和解算法如何起作用? Mar 18, 2025 pm 01:58 PM

本文解释了React的对帐算法,该算法通过比较虚拟DOM树有效地更新DOM。它讨论了性能优势,优化技术以及对用户体验的影响。

什么是Usecontext?您如何使用它在组件之间共享状态? 什么是Usecontext?您如何使用它在组件之间共享状态? Mar 19, 2025 pm 03:59 PM

本文解释了React中的UseContext,该文章通过避免道具钻探简化了状态管理。它讨论了通过减少的重新租赁者进行集中国家和绩效改善之类的好处。

您如何防止事件处理程序中的默认行为? 您如何防止事件处理程序中的默认行为? Mar 19, 2025 pm 04:10 PM

文章讨论了使用DestrestDefault()方法在事件处理程序中预防默认行为,其好处(例如增强的用户体验)以及诸如可访问性问题之类的潜在问题。

受控和不受控制的组件的优点和缺点是什么? 受控和不受控制的组件的优点和缺点是什么? Mar 19, 2025 pm 04:16 PM

本文讨论了React中受控和不受控制的组件的优势和缺点,重点是可预测性,性能和用例等方面。它建议在选择之间选择因素。

See all articles