浏览器启用NPAPI后页面CSS3动画的影响,CSS3硬件加快也有坑

CSS3硬件加快也有坑

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

原文出处: 张云龙先生(@前端农民工)   

常听人说:

举手投足端要想动画质量流畅,应该选拔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 上下文的 元素
  • 浏览器启用NPAPI后页面CSS3动画的影响,CSS3硬件加快也有坑。掺杂插件(如 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)

那句话的意趣是,假如有一个要素,它的小兄弟成分在复合层中渲染,而以此兄弟成分的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地图