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
posted on 2014-10-27 22:03 wisdomoon 阅读(1220) 评论(0) 编辑 收藏 举报