CSS-animations和transitions性能:浏览器到底做了什么?
CSS animations 和 transitions 的性能:浏览器到底做了什么?(译)
原文地址:http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/
你或许有在项目中使用CSS Animations 或者 CSS Transitions的经历(没有使用过的朋友,可以在CSS-Trick's查看使用方法)。一些动画表现的较为平滑流畅,有些则表现的起伏不定。why?
本文我们要研究浏览器是如何处理CSS Animations和 CSS Transitions 。在写码前,你可以对一个动画能否运行平滑建立直觉,基于此,你就能设计出在浏览器中运行良好并且展现舒适流畅的用户体验。
浏览器内部
让我们打开浏览器神秘的面纱,了解它是如何运作的。这样才能完美的驾驭它。
现代浏览器通常有两个非常重要的执行线程。他们一起配合执行来渲染一个页面:
- 主线程
- 排版线程
通常,主线程负责:
- 运行javascript代码
- 计算html元素的css样式
- 渲染页面
- 将元素绘制成一个或多个位图
- 将这些位图交给排版线程
而排版线程则负责下面的事情:
- 通过GPU绘制位图到屏幕上
- 通知主线程更新页面中可见位图或即将可见的位图
- 计算出页面中哪些部分是可见的
- 当页面滚动时计算出页面中哪些部分是即将可见的
- 当页面滚动时移动页面
主线程可以长时间运行你的javascript程序或者绘制较大元素,在此期间不会响应用户行为.
同时,排版进程会试图保持对用户行为的有效响应。当页面内容有所变化的时候,排版进程每秒60次重绘一次页面,包括页面没有渲染完的时候。
例如:当用户滚动页面时,排版线程通知主线程更新最近可见的页面。当然了,如果主线程不应答,排版线程也不会等待,它会绘制页面中已有的部分并将其他部分绘成白屏。
GPU
上文中提到排版线程通过显卡把位图绘制到显示器屏幕。让我们快速了解一下GPU。
GPU是手机、平板电脑、计算机中的一个芯片。它非常专业的完成一些自身的职责,并不擅长其它领域。
GPU 最擅长的事情:
- 绘制位图到屏幕上
- 重复绘制同一位图
- 从不同位置、不同角度、不同比例绘制同一位图
GPU 处理较慢的事情:
- 将位图加载到自己的内存
transition:height
现在我们已经对硬件和软件如何在页面中运行有了初步的了解,下面我们来看看主线程和排版线程是怎么完成下面css动画的。
假设我们要将一个元素的高度从100px变化到200px,如下:
div {
height: 100px;
transition: height 1s linear;
} div:hover {
height: 200px;
}
主线程和排版线程将按照下面的时间线进行操作。注意:橙色方框内的耗时较多,而蓝色方框内的则运行很快。
就像你看到的一样,这里有很多黄色方块,意味着浏览器运行的相当艰难!也就是说这个动画十分不连贯。
在动画的每一帧,浏览器都得执行布局,绘制,更新位图到GPU.上文中已经说过,加载新位图到GPU是相对较慢的操作。
浏览器运行每一帧都很困难的原因是元素的内容一直在改变。改变一个元素的高度会引起他的子元素大小改变,浏览器就得执行布局。布局完成后主线程必须再次为元素生成位图。
transition:transform
我们看到,执行高度的动画代价是高昂的。有没有一些低廉的动画呢?
假设我们要将一个元素从比例从一般大小缩放到完整大小。同时假设我们使用 CSS transform 属性完成缩放,css transform 完成元素缩放的代码如下:
div {
transform: scale(0.5);
transition: transform 1s linear;
} div:hover {
transform: scale(1.0);
}
我们来看看这种情况下的时间线:
我们看到少了很多黄色的块,意味着动画执行将要平滑很多!然而,使用transform运行动画和改变高度运行动画的区别是什么?
按照定义,css的transform属性不会改变元素本身的布局和周围元素的布局。它对元素的影响是整体作用——他整体缩放元素、整体旋转元素或者整体移动元素。
这对于浏览器来说是一个好消息!浏览器只需要在动画开始的时候生成元素的位图并更新到GPU。之后,浏览器不需要做任何渲染、绘制或位图更新。相反浏览器可以利用GPU的特殊能力将相同的位图在不同的位置快速渲染,旋转,缩放。
结论
这意味着我们不能动画改变元素的高度?并非如此,有时候这是你设计的保证,只要动画足够快。或许你的元素是孤立的,并不会引起页面其他部分的重新渲染。或者你的元素重排起来很简单,浏览器可以快速完成。或许你的元素足够小,浏览器只需要将少量位图加载进GPU。
当然了,如果你可以采用css transfrom 这样"低廉"的属性代替更加昂贵的类似于height这类属性,对你的设计毫无影响。那么尽管用吧,少年!例如,假设你的设计中涉及当切换按钮时改变菜单,不应使用改变css属性的height和top属性显示菜单,你应该试着通过改变css的transform属实现相近或者相同的效果。
CSS属性中动画执行效率高的属性包括:
- CSS transform
- CSS opacity
- CSS filter (根据滤镜的复杂程度和浏览器而定)
这个列表是今天的数据,但是随着浏览器的发展,我们会看到更多的css属性在浏览器中越来越快的运行。当然,不要忘记这个列表。你也许会对这些列表中的属性组合出来的丰富效果感到惊讶~。发挥你的创造力吧!
转载请注明出处: http://www.cnblogs.com/wisdomoon/p/css-animation-in-brower.html
CSS-animations和transitions性能:浏览器到底做了什么?的更多相关文章
- 【翻译】CSS Animations VS the Web Animations API:案例学习
原文地址:CSS Animations vs the Web Animations API: A Case Study May 03, 2017 css, javascript 上周我写了我如何使用C ...
- 常用CSS优化总结——网络性能与语法性能建议
在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下 ...
- (转)常用CSS优化总结——网络性能与语法性能建议
原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时 ...
- Animations and transitions
在交互式可视化中,有一个词叫reactive,指的是以可视化的方式来响应用户的行为,帮助用户进行可视化并理解其结果.这个很有用.那如何来实现这种交互呢?通过动画. 如果处理得当,动画可以展现出不错的可 ...
- css写作建议和性能优化小结
1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于css,很多开发者的想法就是,cs ...
- AFNetworking到底做了什么?(二)
接着上一篇的内容往下讲,如果没看过上一篇内容可以点这: AFNetworking到底做了什么? 之前我们讲到NSUrlSession代理这一块: 代理8: /* task完成之后的回调,成功和失败 ...
- 基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
这篇文章主要介绍了基于JavaScript判断浏览器到底是关闭还是刷新(超准确)的相关资料,需要的朋友可以参考下 本文是小编总结的一些核心内容,个人感觉对大家有所帮助,具体内容请看下文: 页面加载时只 ...
- volatile关键字到底做了什么?
话不多说,直接贴代码 class Singleton { private static volatile Singleton instance; private Singleton(){} //双重判 ...
- MySQL实战 | 01-当执行一条 select 语句时,MySQL 到底做了啥?
原文链接:当执行一条 select 语句时,MySQL 到底做了啥? 也许,你也跟我一样,在遇到数据库问题时,总时茫然失措,想重启解决问题,又怕导致数据丢失,更怕重启失败,影响业务. 就算重启成功了, ...
随机推荐
- VisualSVNServerTools(在线修改VisualSVN密码)
采用的是apache htpasswd的命令行参数进行修改,部署时,采用独立的apache server进行. 源码:https://github.com/easonjim/VisualSVNServ ...
- editGrid自定义列自定义F7
添加自定义列,配置控制自定义F7 自定义F7的地址为连接界面的url /dynamicPage.do?event=initialize&method=doEvent&uipk=com. ...
- iptables log
iptables 日志 LOG target 这个功能是通过内核的日志工具完成的(rsyslogd) LOG现有5个选项 --log-level debug,info,notice,warning,w ...
- Servlet —— 避免Servlet的并发同步问题
Servlet的生命周期是由Servlet容器来负责的. Servlet容器通常采用单实例多线程的方式,减少Servlet创建实例的开销,提高效率. 当客户端第一次请求某个Servlet时,Servl ...
- TcpClient类与TcpListener类
TcpClient类 //构造方法1 TcpClient t = new TcpClient(); t.Connect(); //构造方法2 IPEndPoint iep = ); TcpClient ...
- 对JavaScript优化及规范的一些感想
变量...... 1.一个变量只存一种类型的数据,2.尽量减少对隐式转换的依赖,这样可增强程序的可读性,日后修改程序时不至于混乱,3.使用匈牙利命名法,4.使用局部变量时记得加 var 进行声明,不然 ...
- cobbler安装、部署、测试
cobbler功能介绍 官网:http://cobbler.github.io 安装 yum install -y httpd tftp dhcp cobbler cobbler-web pykick ...
- JS-百钱买百鸡案例-for循环制作
<html> <head> <meta charset="utf-8"/> <title></title> <sc ...
- WinForm------分页控件dll下载地址
转载: http://files.cnblogs.com/wuhuacong/TestPager_SqlLite.rar
- CentOS配置163的yum源
entOS系统自带的更新源的速度在国内非常慢,在国内为了让CentOS6使用速度较快快的YUM更新源,建议选择163(网易)的更新源. 1.下载repo文件wget http://mirrors.16 ...