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 最擅长的事情：

1. 1. 　　绘制位图到屏幕上
   2. 　　重复绘制同一位图
   3. 　　从不同位置、不同角度、不同比例绘制同一位图

　　GPU 处理较慢的事情：

1. 1. 　　将位图加载到自己的内存

　　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