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.   绘制位图到屏幕上
    2.   重复绘制同一位图
    3.   从不同位置、不同角度、不同比例绘制同一位图

  GPU 处理较慢的事情:

    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属性在浏览器中越来越快的运行。当然,不要忘记这个列表。你也许会对这些列表中的属性组合出来的丰富效果感到惊讶~。发挥你的创造力吧!

 

  转载请注明出处: http://www.cnblogs.com/wisdomoon/p/css-animation-in-brower.html

    

     

posted on 2014-10-27 22:03  wisdomoon  阅读(1220)  评论(0编辑  收藏  举报

导航