css3动画加速


上回讲了啥?

前情回顾:

上回我们说到我们推荐了css3动画(动画浅析)。那我们这次来看一下css3的动画原理,以及如何开启硬件加速(GPU加速,3D加速)。

在加速之前,我们先熟悉几个概念:

帧:帧——就是影像动画中最小单位的单幅影像画面,相当于电影胶片上的每一格镜头。动画其实是页面一帧一帧刷新和渲染页面的过程,帧是动画的最小单位。

帧率:帧率——fps(frame per second),一秒内渲染的的帧数。当每秒渲染的帧数小于40的时候,也就是帧率<40fps的时候,在网页上就会感觉到卡顿。不同的行业对帧率的要求也是不一样的,比如电影在24fps的时候就感觉很流畅,而游戏就要求50-60fps。

GPU:Graphics Processing Unit(图像处理单元),在图像,音频,视频处理,3d渲染和图像处理方面的优越性要超过CPU。

熟悉了概念之后,我们看下浏览器是怎么处理动画的,知己知彼,百战不殆。

要说浏览器处理动画,总共分几步?哈哈哈,不自觉想到宋丹丹老师。好了,回来看浏览器吧:

浏览器处理动画流程

我们来细分一下每一步做了什么:

1)获取dom:这个没说的,就是获得我们所有的dom树,因为要渲染了嘛,浏览器总得知道是个啥东西。

2)分割图层:这一步,浏览器根据z-index,和脱离了原来dom层的dom解构进行分层。

3)计算样式:分解图层完毕后,将所有的图层批量进行样式计算。这里有些属性是CPU去计算的,有些属性是GPU去计算的,具体哪些,请看下文。

4)reflow-relayout-paint set up-repaint:这一系列过程其实是页面从回流到重绘发生的步骤,这也是为什么回流必然引起重绘,而重绘却不一定要回流的原因。

5)GPU:重绘后的“画布”交给GPU去处理。

6)组合布局:浏览器组合布局,然后页面就出现了。

加速原理:

    重绘还是比较吃性能的,重绘次数越多,丢帧的几率也就越大,页面看起来就会越卡。所以,我们改变属性的时候,要从减少处理流程入手。

    所谓的GPU加速,也是将属性交给GPU处理,GPU处理速度为什么比CPU快?一个是减少了浏览器处理流程,另外一点,和GPU的设计有很大的关系,GPU专为处理图像而生,内部的处理单元比CPU多很多,在处理多并发的时候比CPU有很大优势,CPU在逻辑运算方面比GPU要快,但处理多并发不如GPU。

哪些属性会触发重排(relayout)?

1)盒子模型相关属性:

* width  * height  * padding  * margin  * display  * border-width  * border  * min-height(width)  * max-height(width) 等等。

2)定位和浮动

* top  * bottom  * left  * right  * position  * float  * clear

3)改变节点内部文字结构

* text-align  * overflow-y  * font-weight  * overflow  * font-family  * line-height  * vertical-align  * white-space  * font-size

哪些属性会触发重绘(这个比较杂,就不做分类了):

* color  * border-style  * border-radius  * visibility  * text-decoration  * background  * background-image  * background-position  * background-repeat  * background-size  * outline-color  * outline  * outline-style  * outline-width  * box-shadow

如何加速?开启GPU(硬件,3d)加速

GPU(显卡的心脏)硬件加速(3d加速)。根本原因是创建了新的layer,属性改变直接由GPU处理,加快处理速度。

当浏览器监测到含有某个css属性或规则的时候,就会创建新的layer开启GPU加速,最常用的是3d转换(translate3d)。

所以,有一些属性的改变可以略过relayout,减少浏览器在动画运行时所需要做的工作,其原理也是创建了一个新的layer,这只是一个无害的语法糖。

GPU加速也是有缺点的,GPU使用会增加内存消耗,同时也会影响字体的抗锯齿效果,导致文本在动画期间会显得有些模糊。

1.开启GPU加速前后的处理流程对比。

拿改变组件高度为例,如果我们直接去改属性height,浏览器会这样处理:

改变height

如果我们改变transform,浏览器会这样处理:

改变transform

transform属性会直接交给GPU处理,而height会触发relayout。所以,动画中尽量多的使用transform属性,会大幅提高动画性能。

2.什么情况下,浏览器会创建新的layer,开启GPU加速?

在webkit内核的浏览器中,如果有上述情况,则会创建一个独立的layer:

1)transform(3d转换)

2) video标签

3)混合插件(如 Flash)

4)  isolation == isolate

5)opacity < 1

6)filter != normal

7)z-index != auto || 0  +  父元素display: flex|inline-flex

8)  mix-blend-mode != normal

9)position == fixed || absolute

10)-webkit-overflow-scrolling == touch

11)will-change:指定可以形成新layer的元素。

其实,在css3中,最推荐的还是使用transform:translateZ(0);来创建一个新的layer,成本低,影响小。

除了GPU加速,还有一个比较好用的属性,可以告诉浏览器什么属性将会发生变化,让浏览器做好最佳处理:

will-change。

但好像,兼容性还是有些那啥的,至少IE目前是不支持的。

will-change兼容性

怎样,是不是感觉干货满满?那就给个赞嘛。

加速吧,我的动画
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,496评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,407评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,632评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,180评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,198评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,165评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,052评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,910评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,324评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,542评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,711评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,424评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,017评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,668评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,823评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,722评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,611评论 2 353

推荐阅读更多精彩内容