css3中动画性能高的原因是什么

小编给大家分享一下css3中动画性能高的原因是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 性能高的原因：1、css是关键帧动画，补间动画部分由浏览器完成，浏览器可以对动画进行优化；2、代码简单，性能调优方向固定；3、CSS动画运行在合成线程中，不会阻塞主线程，并且在合成线程中完成的动作不会触发回流和重绘，因而其渲染成本小。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。渲染流程主要有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 树CSS 中至关重要的概念回流回流也叫重排，指几何属性需要改变的渲染。每一次的回流都会将网页内容重新渲染，只是我们人眼感觉不到有任何变化，但是它确实是会清空页面的，再从页面的左上角的第一个像素点从左到右从上到下这样一点一点渲染，每次回流都会是这样的过程，只是感觉不到而已渲染树的节点发生改变，免费云主机、域名影响了该节点的几何属性，导致该节点位置发生变化，此时就会触发浏览器回流并重新生成渲染树。常见的几何属性：布局，尺寸这些可以用尺子量出来的属性display、float、gridwidth、padding等重绘重绘指更改外观属性而不影响集合属性的渲染，类似于颜色这些。相比于回流，重绘的作用不会那么强烈。渲染树的节点发生改变，但不影响该节点的集合属性，回流对浏览器性能的消耗是远大于重绘的。并且回流就必然带来重绘，重绘不一定需要回流外观属性clip，backgroundtext等在介绍完这些知识后我们来聊聊 CSS 动画这里我们只谈论 CSS3 的动画CSS3 动画也被称为补间动画，原因是只需要添加关键帧的位置，其他的未定义的帧会被自动生成因为我们只设置了几个关键帧的位置，所以在进行动画控制的时候比较困难，不能再半路暂停动画，或者在动画过程中添加一些其他操作，都不大容易但是 CSS 动画也有很多的好处浏览器可以对动画进行优化帧速不好的浏览器，CSS3 可以自然降级兼容代码简单，性能调优方向固定首先，JS 动画是逐帧动画，在时间帧上绘制内容，一帧一帧的，所以他的可再造性很高，几乎可以完成任何你想要的动画形式。但是由于逐帧动画的内容不一样，会增加制作的负担，占用比较大的资源空间。但是它也有很多的优势细腻的动画可控性高炫酷高级的动画前面关于 CSS 动画和 JS 动画，都是一些概念性比较强的东西，不看也罢说了这么多，到底为什么CSS动画要更高效呢？第一点从实现动画的复杂度来看，CSS 动画大多数都是补间动画，而 JS 动画是逐帧动画。当然这里我们不谈论实现的效果第二点编码的高效，采用 JS 去实现的动画，无论多简单的动画，都需要去控制整个过程，当然你可能会说可以采用一些库来解决这些问题，但是这些库的实际运行可能要比原生实现的效率要低的多第三点性能的高效，在我们前面讲到了回流和重绘，如果我们要操作一个元素向右移动，我们可能需要控制 dom.style.left 属性，每次来改变元素的位置，而结合我们所说的，几何属性的改变必然会引起回流，回流必然引起重绘，可想而知如果我们采用 JS 来实现动画，这个代价有多大，这会造成浏览器在不断的计算页面，从而导致浏览器内存堆积。同时由于 JavaScript 运行在浏览器的主线程中，主线程中还有其他的重要任务在运行，因而可能会受到干扰导致线程阻塞，从而丢帧而 CSS 的动画是运行在合成线程中的，不会阻塞主线程，并且在合成线程中完成的动作不会触发回流和重绘当然还有一个重要的点：JS 动画运行在 CPU，而 CSS 动画运行在 GPU总的来说， CSS动画的渲染成本小，并且它的执行效率高于 JavaScript 动画以上是“css3中动画性能高的原因是什么”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云技术行业资讯频道！

相关推荐: es6中拼接字符串的方法有哪些

这篇“es6中拼接字符串的方法有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“es6中拼接字符串的方法有哪些”文章吧。 es6中拼接字符串有…