GPU加速有坑,CSS3硬件加快也有坑

CSS3硬件加快也有坑

2015/09/20 · CSS ·
硬件加快

初稿出处: 张云龙(英文名:Leon)(@前端农民工)   

常听人说:

移步端要想动画品质流畅,应该运用3d硬件加快

近来深远摸底了一些浏览器内核的底细,感觉这几个中其实有坑啊。。。

工作要从日前看的《WebKit技术内幕》说起,第二章介绍了网页的协会,其中涉及了Webkit硬件加快的办法,会把需要渲染的元素放到一定的『Composited
Layer』中,在chrome的控制台可以那样开启:

亚洲必赢官网 1

分选『Show composited layer
borders』将来,就能看出有动画3d变换的要素会被一个风骚的边框圈起来,表示放到了一个新的『复合层(composited
layer)』中渲染,大概长那一个样子:

亚洲必赢官网 2

青色的细线是浏览器渲染时候的『瓦片』,浏览器绘制页面的时候只会绘制可视区域一定范围内的瓦片,以节约品质费用,而红色的边框框起来的,就象征了那个元素被安放特殊的复合层中渲染,跟主文档不在一个层中

接下来自己觉得这些视图挺好玩的,就拿来看了一下境内某项目,不看不了解,一看被吓尿:

亚洲必赢官网 3

本条体系怎么时候搞成富有因素都用3d加快了?!

周全排查了这一个被框出来的元素,完全没有其余必要复合层渲染的迹象,我真是哔了狗了。。。我起首一个个刨除元素,简化代码,很快就意识,原来罪魁祸首在那里:

亚洲必赢官网 4

尾部的十分轮播动画元素的存在甚至会导致上面所有绝对和相对定位的元素都被放到复合层中。。。

查了一部分 资料:

层成立标准

如何状态下能使元素得到自己的层?即使 Chrome
的启发式方法(heuristic)随着岁月在持续进化升高,可是从脚下来说,满意以下任意景况便会创造层:

  • 3D 或透视变换(perspective transform) CSS 属性
  • 动用加快视频解码的 元素
  • 具有 3D (WebGL) 上下文或加紧的 2D 上下文的 元素
  • 错落插件(如 Flash)
  • 对团结的 opacity 做 CSS 动画或使用一个卡通 webkit 变换的要素
  • 抱有加快 CSS 过滤器的因素
  • 要素有一个富含复合层的遗族节点(换句话说,就是一个要素拥有一个子元素,该子元素在温馨的层里)
  • GPU加速有坑,CSS3硬件加快也有坑。要素有一个 z-index
    较低且带有一个复合层的哥们元素(换句话说就是该因素在复合层上面渲染)

首假如终极一条,我觉着它的中文翻译不是很准确,原文其实是:

Element has a sibling with a lower z-index which has a compositing
layer (in other words the it’s rendered on top of a composited layer)

那句话的意味是,如果有一个元素,它的哥们元素在复合层中渲染,而这些兄弟元素的z-index相比小,那么这一个元素(不管是还是不是行使了硬件加快样式)也会被平放复合层中。

最骇人听闻的是,浏览器有可能给复合层之后的具有相对或绝对定位的因素都创制一个复合层来渲染,于是就有了地点格外项目截图的这种效果。此前一直奇怪为啥这么些页面滚动很卡,明明没有稍微DOM,现在总的来说难点就在此处了!

于是我写了一个页面,让我们看看这东西到底有多大威力:

亚洲必赢官网 5

自家在地方这一个页面中放置了一个h1标题,应用了translate3d动画,使得它被置于composited
layer中渲染,然后在这一个元素后边创设了2000个list,每个list中都有一个图形,一个标题和一个日子突显,其中图片和日期呈现是相对定位,父容器li是相持固定,然后,各位可以依据前述的声明打开chrome的『show
composited layer borders』选项看看这几个页面的内容复合层分布:

亚洲必赢官网 6

就是以此鸟样子,很难想象,那样的页面滚动起来会卡成如何。我用的是mac机器,火速拖动滚动条chrome已经相当费力了,然后自己写了一个不难易行的滚动条移动操作:

setInterval(‘document.body.scrollTop++’, 0);

然后用timeline抓一下页面质量:

亚洲必赢官网 7

三次『Composite
Layers』的乘除依旧要 96.206 ms !!那仍旧在我的mac系统上哦,手机上的确会卡出翔。

自我在页面上放置了一个开关『为卡通元素设置z-index』,这几个checkbox点击之后,会用js给那些动画的h1元素加 position:relative 和 z-index: 1 ,那种做法的法则是人工升高动画元素的z-index,让浏览器知道那个元素的层排序,就不会很傻逼的把其他z-index比它高的要素也弄到复合层中了,看看这么些成效:

亚洲必赢官网 8

单单给动画元素设置一个高一些的z-index,就能缓解那种无厘头扩充复合层的难点,略无语。。。搞定之后,再用滚动条移动函数抓一下页面质量:

完全苏醒正常了有木有!

大家可以用辅助『硬件加速』的『安卓』手机浏览器测试上述页面,给动画元素加z-index前后的特性差别分外强烈。

只是也不是持有浏览器都有那个题材,我在mac上的Safari、firefox都没有明了差距,安卓手机上的QQ浏览器好像也正常,猎豹、UC、欧朋、webview等浏览器差异总之,更加多测试就靠我们来发现吗。

最后统计一下:

选取3D硬件加速提高动画质量时,最好给元素伸张一个z-index属性,人为困扰复合层的排序,可以有效压缩chrome成立不必要的复合层,提升渲染品质,移动端优化功效进一步引人侧目。

世家可之前天就排查一下那类难题,更加是用了轮播、动画loading的页面,出现那标题很宽泛。别的推荐在追查品质难点的时候打开『show
composited layer borders』选项,借使页面有众多风骚的框肯定是不对的。

终极,再次推荐一下《Webkit技术内幕》那本书。浏览器内核之于前端工程师,就就像是操作系统之于后端工程师,毕竟是大家程序运行的宿主环境,多询问部分,很多标题简单想通。

1 赞 1 收藏
评论

亚洲必赢官网 9

题目讲述:

发出条件:

在360有惊无险浏览器/360极速浏览器(npapi插件开启)

CSS3动画及flash 共存

上述条件还要合乎的场景下,在某个flash播放的时候,触发任意一个包蕴CSS3卡通的要素,会发现flash消失,待CSS3动画播放完结之后再也出现,若是页面比较复杂时会发现任何文本元素也会有闪动现象。(此时亟需的字体饱和度(hsla中的s)较高,那样肉眼可以清晰的看到字体闪动。)

环境准备:

1,打开360安全浏览器【其余主流浏览器非NPAPI】

 2.  先看下是或不是use npapi 

            方法:  在地点栏输入  se://plugins  如图查看是不是打开

亚洲必赢官网 10

此情此景带入:

谢谢小说CSS3硬件加快,硬件加速的措施,会把须要渲染的元素放到一定的复合层(composited
layer)中,倘若你想查看你的页面是还是不是利用了2D要么3D加快,可以用下列方法去查看。

在控制台可以这样开启:【我以360安然无恙浏览器为例】

亚洲必赢官网 11

勾选Show composited layer
borders未来,就能见到有动画3d/2d变换的元素会被一个香艳的边框圈起来,表示放到了一个新的
“复合层(composited layer)” 中渲染,大致长那些样子:

亚洲必赢官网 12

红色的细线是浏览器渲染时候的瓦片,浏览器绘制页面的时候只会绘制可视区域一定范围内的瓦片,以节约质量花费,而藏黑色的边框框起来的,就象征了那一个元素被内置特殊的复合层中渲染,跟主文档不在一个层中,但骨子里我唯有中间的几处选取了2D动画,但有目共睹很多并不会波及的容器也被紫色的边框框了起来,经过排查发现,是因为CSS3动画【那儿要说一下动画片包罗transform 和 animation, 不论是@keyframes 依旧简单的 translate rotate …
】导致随后所有相对相对固化的元素都被放置复合层中渲染。

查了一些 资料:

层创造标准怎么状态下能使元素获得自己的层?满意以下任意情状便会创立层:

亚洲必赢官网 ,3D 或透视变换(perspective transform) CSS 属性

行使加快摄像解码的 元素

具有 3D (WebGL) 上下文或加快的 2D 上下文的 元素

掺杂插件(如 Flash)

对友好的 opacity 做 CSS 动画或利用一个动画 webkit 变换的元素

抱有加快 CSS 过滤器的元素

要素有一个含有复合层的后代节点(换句话说,就是一个因素拥有一个子元素,该子元素在自己的层里)

要素有一个 z-index
较低且富含一个复合层的兄弟元素(换句话说就是该因素在复合层上边渲染)

说到底一条,原文是:

Element has a sibling with a lower z-index which has a compositing
layer (in other words the it’s rendered on top of a composited layer)

自身回转眼睛了下我的页面,非凡契合上述的条件,所以很不难被成立了复合层,导致疑惑CSS3 3D加快的一些品质影响了页面中的内容的错觉
 直至到末代flash动画与CSS3动画片同时存在的情景里的时候 才可以缓解。

缓解形式:

1.
一旦不存在flash,唯有CSS3动画,影响到了页面其余例如字体抖动的情况下: 

亟需给动画元素加 position:relative和 z-index:
1,那种做法的规律是人造升高动画元素的z-index,让浏览器知道那么些元素的层排序,就不会把其余z-index比它高的因素也弄到复合层中了;

2.
万一flash和CSS3卡通并存,影响到了页面别的例如字体抖动的情况仍旧CSS3动画影响到了正在播放的flash的时候

亟需动画元素加 position:relative和 z-index: 1,注意
一定要动画元素的z-index高于flash的z-index;

注:flash在创立的时候若是加了滤镜效果,在360平安浏览器【npapi】下,会有黑底出现,极其影响视觉感受。

动画卡顿是在活动web开发时常常蒙受的题材,解决那一个标题一般会用到css3硬件加速
css3硬件加速那几个名字感觉上很巨大上,其实它做的事体能够简单概括为:通过GPU举行渲染,解放cpu。

大部人都通晓有动画的地方能够采纳GPU来增速页面渲染。例如,做优化的时候,将动用lefttop属性的卡通片修改成选择transform属性的CSS动画。或者听到别人教您采用transform:translateZ(0)给有动画的部分额外开启GPU加速。

现象

由此对照不使用css3加速和使用css3加速八个例证,大家得以观望双方渲染的差别:

亚洲必赢官网 13

不使用css3加速.png

亚洲必赢官网 14

使用css3加速.png

前端通过改变top和left属性举行动画,fps维持在47左右,cpu一贯进行总结;后者通过transform已毕,fps在62左右,cpu基本不必要总结。相比较可以通过transform岂但荣升了渲染质量,也解放了cpu。

 

原理

DOM树和CSS结合后形成渲染树。渲染树中含有了汪洋的渲染元素,每一个渲染元素会被分到一个图层中,每个图层又会被加载到GPU形成渲染纹理。GPU中transform是不会触发
repaint 的,这点非常相近3D绘图功用,最后那个应用
transform的图层都会由独立的合成器进度展开拍卖。

透过chrome的timeline工具,灰色框代表须要repaint的一些,绿色框代表渲染图层,比较两者可见采取的css3硬件加快后,不会进展repaint操作,而只会发出一个渲染图层,GPU就担负操作这么些渲染图层。

亚洲必赢官网 15

不使用css3加速.png

亚洲必赢官网 16

使用css3加速.png

时下上面这么些要素都会唤起chrome成立层:

复合图层

在常理中大家提到transform会创造一个图层,GPU会来执行transform的操作,这些图层且称为复合图层(composited
layer)。
就算 Chrome
的启发式方法(heuristic)随着时光在持续前行发展,不过从脚下来说,满意以下任意情形便会成立层:

  • 3D 或透视变换(perspective transform) CSS 属性
  • 使用加速视频解码的要素,如<video>
  • 具有 3D (WebGL) 上下文或加速的 2D 上下文的因素,如<canvas>
  • 掺杂插件(如 Flash)
  • 对友好的 opacity 做 CSS 动画或利用一个动画 webkit 变换的因素
  • 不无加快 CSS 过滤器的元素,如CSS filters
  • 要素有一个富含复合层的后裔节点(换句话说,就是一个要素拥有一个子元素,该子元素在融洽的层里)
  • 要素有一个 z-index
    较低且富含一个复合层的弟兄元素(换句话说就是该因素在复合层上面渲染)

只要页面建立了过多的复合图层,同样也会促成页面的卡顿。在CSS3硬件加快也有坑那篇小说中,小编介绍了由于z-index造成复合图层过多而吸引的题材,在随后开发时得以借鉴。可以调剂图层过多卡顿页面摸底z-idnex对图层成立的震慑。

  1. 3D 或透视变换(perspective,transform) CSS 属性
  2. 应用加速视频解码的 <video> 元素
  3. 享有 3D (WebGL) 上下文或加快的 2D 上下文的 <canvas> 元素
  4. 掺杂插件(如 Flash)
  5. 对协调的 opacity 做 CSS 动画或采纳一个动画 webkit 变换的因素
  6. 抱有加快 CSS 过滤器的元素
  7. 要素有一个 z-index 比自己小的哥们儿节点,且该节点是一个合成层
启用

一般来说几个css属性可以触发硬件加速:

  • transform
  • opacity
  • filter
  • will-change:哪一个性质即将暴发变化,进而开展优化。

下面的的例证中用到的是transform
2D,它是在运转时才会成立图层,由此在动画开端和终结时会进行repaint操作;而浏览器在渲染前就为transform
3D创立了图层。

亚洲必赢官网 17

起来时的repaint

亚洲必赢官网 18

利落时的repaint

可以经过transform的3D属性强制开启GPU加快:

  transform: translateZ(0);
  transform: rotateZ(360deg);

下边6点都非凡简单了解,在平常支付中,最简单并发难点的是第7点

注意事项
  • 不可以让每个元素都启用硬件加快,那样会暂用很大的内存,使页面会有很强的卡顿感。
  • GPU渲染会影响字体的抗锯齿效果。那是因为GPU和CPU具有区其余渲染机制,固然最终硬件加快停止了,文本如故会在动画期间显得得很模糊。

 

参照小说:
  1. CSS动画之硬件加快:小编相比较详细介绍了硬件加快,统计的很成功。
  2. CSS3硬件加快也有坑:
    笔者介绍了由于z-index造成复合图层过多,将来开发加以注意。
  3. 拔取CSS3
    will-change升高页面滚动、动画等渲染品质:
    will-change的介绍
  4. javascript质量优化-repaint和reflow:性能杀手以及优化措施。
  5. 两张图解释CSS动画的品质:相比较详细相比了选择硬件加快和不采纳硬件加速的流程差距。

隐式合成:元素有一个
z-index
比自己小的弟兄节点,且该节点是一个合成层,则该元素会创立层。

拿实际项目举个栗子,我们按照地方的步子开启layer borders 

 亚洲必赢官网 19

尚无给上图右手添加高层级的z-index时,总体页面在活动端打开后闪退。而添加了z-index之后,页面正常显示,不闪退了。
有心人看上边的gif,仅仅改变了z-index,就会变动大批数目标层(褐色边框)

 

怎么z-index力量如此大?

大家来看一个板栗,B在做动画,理所当然把B提到单独的合成层(给B增添品质transform:translateZ(0))。减弱重绘。 

亚洲必赢官网 20

按照上图,我们相遇一个逻辑难题,元素B应该在独立的合成层上,并且显示屏的终极图像应该在GPU上整合。不过A元素在B元素的顶部,我们没有点名提高A元素自身层级的东西。那么浏览器会做哪些?**它将威胁为元素A创立一个新的合成图层。**

诸如此类,A和B都被升级到独门的复合层。
由此,使用GPU加快提高动画品质时,最好给元素增添一个高一些的z-index属性,人为烦扰复合层的排序,可以有效收缩chrome创设不要求的复合层,升高渲染质量。

 

找到layers,点击当前层,在左边查看占用的memory(内存)

亚洲必赢官网 21

 

留神:别盲目创立渲染层,一定要分析其实际品质表现。因为创建渲染层是有代价的,每创制一个新的渲染层,就象征新的内存分配和更扑朔迷离的层的保管。并且在移动端
GPU 和 CPU 的带宽有限量,创造的渲染层过多时,合成也会成本跟多的岁月。

 

总结:

运用GPU进步动画质量时,尤其是用了轮播、动画loading的页面,最好给元素增添一个z-index属性,人为困扰复合层的排序,能够有效削减chrome创设不须求的复合层,提高渲染性能。

 

更详实的内容可前往:

网站地图xml地图