目录
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脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

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

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

React在HTML中的作用:增强用户体验 React在HTML中的作用:增强用户体验 Apr 09, 2025 am 12:11 AM

React通过JSX与HTML结合,提升用户体验。1)JSX嵌入HTML,使开发更直观。2)虚拟DOM机制优化性能,减少DOM操作。3)组件化管理UI,提高可维护性。4)状态管理和事件处理增强交互性。

VUE 2的反应性系统在数组和对象更改方面有什么局限性? VUE 2的反应性系统在数组和对象更改方面有什么局限性? Mar 25, 2025 pm 02:07 PM

VUE 2的反应性系统在直接阵列索引设置,长度修改和对象属性添加/删除方面挣扎。开发人员可以使用VUE的突变方法和vue.set()来确保反应性。

REACT组件:在HTML中创建可重复使用的元素 REACT组件:在HTML中创建可重复使用的元素 Apr 08, 2025 pm 05:53 PM

React组件可以通过函数或类定义,封装UI逻辑并通过props接受输入数据。1)定义组件:使用函数或类,返回React元素。2)渲染组件:React调用render方法或执行函数组件。3)复用组件:通过props传递数据,构建复杂UI。组件的生命周期方法允许在不同阶段执行逻辑,提升开发效率和代码可维护性。

与React一起使用打字稿有什么好处? 与React一起使用打字稿有什么好处? Mar 27, 2025 pm 05:43 PM

Typescript通过提供类型安全性,提高代码质量并提供更好的IDE支持来增强反应开发,从而降低错误并提高可维护性。

反应与前端:建立互动体验 反应与前端:建立互动体验 Apr 11, 2025 am 12:02 AM

React是构建交互式前端体验的首选工具。1)React通过组件化和虚拟DOM简化UI开发。2)组件分为函数组件和类组件,函数组件更简洁,类组件提供更多生命周期方法。3)React的工作原理依赖虚拟DOM和调和算法,提高性能。4)状态管理使用useState或this.state,生命周期方法如componentDidMount用于特定逻辑。5)基本用法包括创建组件和管理状态,高级用法涉及自定义钩子和性能优化。6)常见错误包括状态更新不当和性能问题,调试技巧包括使用ReactDevTools和优

如何将用户使用者用于复杂状态管理? 如何将用户使用者用于复杂状态管理? Mar 26, 2025 pm 06:29 PM

本文在React中使用UserDucer进行了复杂的状态管理解释,详细介绍了其对Usestate的好处,以及如何将其与副作用的使用效率集成在一起。

vue.js中的功能组件是什么?它们什么时候有用? vue.js中的功能组件是什么?它们什么时候有用? Mar 25, 2025 pm 01:54 PM

vue.js中的功能组件无状态,轻量级且缺乏生命周期钩,非常适合呈现纯数据和优化性能。它们通过没有状态或反应性而与状态组件不同,使用渲染函数直接

您如何确保可以访问反应组件?您可以使用什么工具? 您如何确保可以访问反应组件?您可以使用什么工具? Mar 27, 2025 pm 05:41 PM

本文讨论了确保可访问反应组件的策略和工具,重点是语义HTML,ARIA属性,键盘导航和颜色对比度。它建议使用Eslint-Plugin-JSX-A11Y和Axe核等工具进行testi

See all articles