实用的 CSS — 动画性能对比

jonh_felix 发布于2019-08-29 12:57 / 2956人阅读

摘要：欢迎移步我的博客阅读实用的动画性能对比前言在现代浏览器中，渲染页面所要负责的线程主要有两个主线程和排版线程。经过上面的实验，我们对属性有了比较好的了解同时我们对上述动画性能也有一个了解。

欢迎移步我的博客阅读：《实用的 CSS — 动画性能对比》

前言

在现代浏览器中，渲染页面所要负责的线程主要有两个：主线程和排版线程。

主线程

运行 JS

计算 HTML 元素的 CSS 样式

布局页面

把页面元素绘制成一个或多个位图

把这些位图移交给排版线程

在浏览器开始渲染页面，或者长时间执行某个 JS 时，主线程会一直在忙碌状态，此时对于用户的任何输入或是操作都不会有所响应。

排版线程

通过 GPU 渲染位图，并显示在屏幕上

向主线程请求更新位图的可见部分或即将可见的部分

判断出当前页面处于可见的部分

判断出即将通过页面滚动而可见的部分

随着用户滚动页面来移动这些部分

排版线程对于用户的操作保持快速的响应，普遍的效率时每秒 60 帧的速度去刷新显示。

Transtion

下面我们在网页中实现一个元素的高度变化的动画，鼠标悬浮在元素上动画启动，直至完成：

通过对上述代码的观察，让我们来了解一下浏览器的两个线程是如何协同工作的：

图中橘黄色部分代表操作相对较慢，消耗较大；蓝色部分代表操作相对较快，消耗较小

从上图我们可以看到，浏览器的两个线程在来回地切换工作，而且橘黄色出现次数较多，这意味着浏览器需要处理相当多的工作。

对于浏览器而言，由于元素的高度一直在变化，因此这个动画的每一帧中，都需要重新布局 ——> 绘制页面 ——> 将新的位图加载到 GPU 中 ——> 显示。而其中加载到 GPU 是一个相对缓慢的操作。

同时我们也在通过浏览器去查看元素动画的过程，其实是由略微卡顿的现象的。

Transform

经过上面的实验，我们对 transition 属性有了比较好的了解；同时我们对上述动画性能也有一个了解。接着我需要在网页中实现一个元素的大小变化动画，鼠标悬浮在元素上动画启动，直至完成：

完成上述实验，再让我们来看看两个线程工作的过程：

由此我们可以看到，两个线程来回切换的情况并不多，橘黄色部分出现的次数也较少，蓝色部分居绝大部分，这意味着这个动画效果相较于上面的要流畅很多。

在定义中，transform 是不会使浏览器产生重新排版的，因此 transform 不会影响原本的布局，以及周围的元素。它会将定义的元素作为一个整体进行缩放、移动或旋转等。

基于 transform 这类的特性，浏览器在渲染页面时可以节省很多不必要的开支，例如重新布局和将位图传给 GPU 等工作，这样就使得动画更有效率。

总结

当页面需要位移动画时，我们有两种方案：使用 position 或是 transalte，而这两种是符合上述情况的。其中 position 的位移方案与第一个符合，在动画执行过程中会使浏览器重新渲染；另一外 transalte 则与第二个符合，在执行动画时不会发生重新渲染。因此，在需要写动画时，我们需要选择合适的方案，最好是选择 scale()、rotate()、transalte() 等，因为他们具有更好的性能。

参考

W3C: CSS Transforms
W3C: CSS Transitions
css-animations-and-transitions-performance

云服务器 GPU云服务器高性能css3动画 css3动画性能对比磁盘性能对比

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112256.html

CSS 火焰？不在话下

摘要：下图是我鼓捣到另外一个小，当到元素的时候，产生火焰效果嗯，这些其实都是对滤镜及混合模式的一些搭配运用。主要几个属性默认大家已经掌握了大概，阅读后可以自行去了解补充更多细节更多精彩技术文章汇总在我的，持续更新，欢迎点个订阅收藏。正文从下面开始。今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。嗯，长什么样子？在 CodePen 上输入关键字 CSS Fire，能找到这样的：或者...

Cciradih 2019-04-23 11:43 评论0 收藏0
CSS 火焰？不在话下

摘要：今天的小技巧是使用纯生成火焰，逼真一点的火焰。如上图，整个蜡烛的骨架，除去火焰的部分很简单，掠过不讲。利用上述，我们要先生成一个类似火焰形状的三角形。正文从下面开始。今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。嗯，长什么样子？在 CodePen 上输入关键字 CSS Fire，能找到这样的： showImg(https://segmentfault.com/img/...

olle 2019-08-30 15:43 评论0 收藏0
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0
ELSE 技术周刊(2017.11.06期)

摘要：业界动态成为版本，当前发布版本为。前一阶段主要聚焦于减少操作。技术纵横重磅消息要支持开发和开发了主题演讲当中提出的第一项重要公告，正是候选发行版简称的公布。业界动态 NEWS: Node.js 8 Moves into Long-Term Support and Node.js 9 Becomes the New Current Release Line Node 8成为LTS版本，...

jiekechoo 2019-08-21 17:30 评论0 收藏0
css相关 - 收藏集 - 掘金

摘要：在正式前端一些小细节前端掘金英文原文，翻译未来的太让人兴奋了一方面，是全新的页面布局方式另一方面，是酷炫的滤镜颜色等视觉效果。老司机教你更好的进行编程个技巧前端掘金并不总是容易处理。 CSS3 实现文字流光渐变动画 - 前端 - 掘金来自百度前端技术学院的实践任务：有趣的鼠标悬浮模糊效果，参考：http://ife.baidu.com/course/d...，用CSS3实现了一下，顺便...

molyzzx 2019-08-29 12:38 评论0 收藏0