用CSS开启硬件加速来抓牢网址质量

2019-09-19 05:08 来源:未知

避免隐式合成

  • 保持动画的对象的z-index尽可能的高。理想的,这些元素应该是body元素的直接子元素。当然,这不是总可能的。所以你可以克隆一个元素,把它放在body元素下仅仅是为了做动画。
  • 将元素上设置will-change CSS属性,元素上有了这个属性,浏览器会提升这个元素成为一个复合层(不是总是)。这样动画就可以平滑的开始和结束。但是不要滥用这个属性,否则会大大增加内存消耗。

   -moz-transform: translateZ(0);

现象

通过对比不使用css3加速和使用css3加速两个例子,我们可以看到两者渲染的差异:

图片 1

不使用css3加速.png

图片 2

使用css3加速.png

前者通过改变top和left属性进行动画,fps维持在47左右,cpu一直进行计算;后者通过transform实现,fps在62左右,cpu基本不需要计算。对比可知通过transform不仅提升了渲染性能,也解放了cpu。

浏览器渲染

提高动画的优化不得不提及浏览器是如何渲染一个页面。在从服务器中拿到数据后,浏览器会先做解析三类东西:

  • 解析html,xhtml,svg这三类文档,形成dom树。
  • 解析css,产生css rule tree。
  • 解析js,js会通过api来操作dom tree和css rule tree。

解析完成之后,浏览器引擎会通过dom tree和css rule tree来构建rendering tree:

  • rendering tree和dom tree并不完全相同,例如:<head></head>或display:none的东西就不会放在渲染树中。
  • css rule tree主要是完成匹配,并把css rule附加给rendering tree的每个element。

在渲染树构建完成后,

  • 浏览器会对这些元素进行定位和布局,这一步也叫做reflow或者layout。
  • 浏览器绘制这些元素的样式,颜色,背景,大小及边框等,这一步也叫做repaint。
  • 然后浏览器会将各层的信息发送给GPU,GPU会将各层合成;显示在屏幕上。

3D 或者 CSS transform

复合图层

在原理中我们提到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对图层创建的影响。

一篇文章说清浏览器解析和CSS(GPU)动画优化

2017/01/10 · CSS · AR

原文出处: 黑色的影子   

相信不少人在做移动端动画的时候遇到了卡顿的问题,这篇文章尝试从浏览器渲染的角度;一点一点告诉你动画优化的原理及其技巧,作为你工作中优化动画的参考。文末有优化技巧的总结。

因为GPU合成没有官方规范,每个浏览器的问题和解决方式也不同;所以文章内容仅供参考。

浏览器什么时候会创建一个独立的复合图层呢?事实上一般是在以下几种情况下:

原理

DOM树和CSS结合后形成渲染树。渲染树中包含了大量的渲染元素,每一个渲染元素会被分到一个图层中,每个图层又会被加载到GPU形成渲染纹理。GPU中transform是不会触发 repaint 的,这一点非常类似3D绘图功能,最终这些使用 transform的图层都会由独立的合成器进程进行处理。

通过chrome的timeline工具,绿色框代表需要repaint的部分,橙色框代表渲染图层,对比两者可知采用的css3硬件加速后,不会进行repaint操作,而只会产生一个渲染图层,GPU就负责操作这个渲染图层。

图片 3

不使用css3加速.png

图片 4

使用css3加速.png

内存占用

使用GPU动画需要发送多张渲染层的图像给GPU,GPU也需要缓存它们以便于后续动画的使用。

一个渲染层,需要多少内存占用?为了便于理解,举一个简单的例子;一个宽、高都是300px的纯色图像需要多少内存?

300 300 4 = 360000字节,即360kb。这里乘以4是因为,每个像素需要四个字节计算机内存来描述。

假设我们做一个轮播图组件,轮播图有10张图片;为了实现图片间平滑过渡的交互;为每个图像添加了will-change:transform。这将提升图像为复合层,它将多需要19mb的空间。800 600 4 * 10 = 1920000。

仅仅是一个轮播图组件就需要19m的额外空间!

在chrome的开发者工具中打开setting——》Experiments——》layers可以看到每个层的内存占用。如图所示:

图片 5

图片 6

CSS filters

注意事项
  • 不能让每个元素都启用硬件加速,这样会暂用很大的内存,使页面会有很强的卡顿感。
  • GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制,即使最终硬件加速停止了,文本还是会在动画期间显示得很模糊。

参考

GPU合成主要参考:

https://www.smashingmagazine….

哪些属性会引起reflow、repaint及composite,你可以在这个网站找到:

1 赞 2 收藏 评论

图片 7

   -webkit-transform: translate3d(250px,250px,250px)

动画卡顿是在移动web开发时经常遇到的问题,解决这个问题一般会用到css3硬件加速
css3硬件加速这个名字感觉上很高大上,其实它做的事情可以简单概括为:通过GPU进行渲染,解放cpu。

用css动画而不是js动画

css动画有一个重要的特性,它是完全工作在GPU上。因为你声明了一个动画如何开始和如何结束,浏览器会在动画开始前准备好所有需要的指令;并把它们发送给GPU。而如果使用js动画,浏览器必须计算每一帧的状态;为了保证平滑的动画,我们必须在浏览器主线程计算新状态;把它们发送给GPU至少60次每秒。除了计算和发送数据比css动画要慢,主线程的负载也会影响动画; 当主线程的计算任务过多时,会造成动画的延迟、卡顿。

所以尽可能地使用基于css的动画,不仅仅更快;也不会被大量的js计算所阻塞。

   transform: translate3d(0, 0, 0);

参考文章:
  1. CSS动画之硬件加速:作者比较详细介绍了硬件加速,总结的很到位。
  2. CSS3硬件加速也有坑: 作者介绍了由于z-index造成复合图层过多,以后开发加以注意。
  3. 使用CSS3 will-change提高页面滚动、动画等渲染性能: will-change的介绍
  4. javascript性能优化-repaint和reflow:性能杀手以及优化方法。
  5. 两张图解释CSS动画的性能:比较详细对比了采用硬件加速和不采用硬件加速的流程差异。

GPU是如何合成图像的

GPU实际上可以看作一个独立的计算机,它有自己的处理器和存储器及数据处理模型。当浏览器向GPU发送消息的时候,就像向一个外部设备发送消息。

你可以把浏览器向GPU发送数据的过程,与使用ajax向服务器发送消息非常类似。想一下,你用ajax向服务器发送数据,服务器是不会直接接受浏览器的存储的信息的。你需要收集页面上的数据,把它们放进一个载体里面(例如JSON),然后发送数据到远程服务器。

同样的,浏览器向GPU发送数据也需要先创建一个载体;只不过GPU距离CPU很近,不会像远程服务器那样可能几千里那么远。但是对于远程服务器,2秒的延迟是可以接受的;但是对于GPU,几毫秒的延迟都会造成动画的卡顿。

浏览器向GPU发送的数据载体是什么样?这里给出一个简单的制作载体,并把它们发送到GPU的过程。

  • 画每个复合层的图像
  • 准备图层的数据
  • 准备动画的着色器(如果需要)
  • 向GPU发送数据

所以你可以看到,每次当你添加transform:translateZ(0)will-change:transform给一个元素,你都会做同样的工作。重绘是非常消耗性能的,在这里它尤其缓慢。在大多数情况,浏览器不能增量重绘。它不得不重绘先前被复合层覆盖的区域。

   -webkit-backface-visibility: hidden;

启用

如下几个css属性可以触发硬件加速:

  • transform
  • opacity
  • filter
  • will-change:哪一个属性即将发生变化,进而进行优化。

上面的的例子中用到的是transform 2D,它是在运行时才会创建图层,因此在动画开始和结束时会进行repaint操作;而浏览器在渲染前就为transform 3D创建了图层。

图片 8

开始时的repaint

图片 9

结束时的repaint

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

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

composite

在reflow和repaint之后,浏览器会将多个复合层传入GPU;进行合成工作,那么合成是如何工作的呢?

假设我们的页面中有A和B两个元素,它们有absolute和z-index属性;浏览器会重绘它们,然后将图像发送给GPU;然后GPU将会把多个图像合成展示在屏幕上。

XHTML

<style> #a, #b { position: absolute; } #a { left: 30px; top: 30px; z-index: 2; } #b { z-index: 1; } </style> <div id="#a">A</div> <div id="#b">B</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
#a, #b {
position: absolute;
}
 
#a {
left: 30px;
top: 30px;
z-index: 2;
}
 
#b {
z-index: 1;
}
</style>
<div id="#a">A</div>
<div id="#b">B</div>

图片 10

我们将A元素使用left属性,做一个移动动画:

XHTML

<style> #a, #b { position: absolute; } #a { left: 10px; top: 10px; z-index: 2; animation: move 1s linear; } #b { left: 50px; top: 50px; z-index: 1; } @keyframes move { from { left: 30px; } to { left: 100px; } } </style> <div id="#a">A</div> <div id="#b">B</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
#a, #b {
position: absolute;
}
 
#a {
left: 10px;
top: 10px;
z-index: 2;
animation: move 1s linear;
}
 
#b {
left: 50px;
top: 50px;
z-index: 1;
}
 
@keyframes move {
from { left: 30px; }
to { left: 100px; }
}
</style>
<div id="#a">A</div>
<div id="#b">B</div>

在这个例子中,对于动画的每一帧;浏览器会计算元素的几何形状,渲染新状态的图像;并把它们发送给GPU。(你没看错,position也会引起浏览器重排的)尽管浏览器做了优化,在repaint时,只会repaint部分区域;但是我们的动画仍然不够流畅。

因为重排和重绘发生在动画的每一帧,一个有效避免reflow和repaint的方式是我们仅仅画两个图像;一个是a元素,一个是b元素及整个页面;我们将这两张图片发送给GPU,然后动画发生的时候;只做两张图片相对对方的平移。也就是说,仅仅合成缓存的图片将会很快;这也是GPU的优势——它能非常快地以亚像素精度地合成图片,并给动画带来平滑的曲线。

为了仅发生composite,我们做动画的css property必须满足以下三个条件:

  • 不影响文档流。
  • 不依赖文档流。
  • 不会造成重绘。

满足以上以上条件的css property只有transform和opacity。你可能以为position也满足以上条件,但事实不是这样,举个例子left属性可以使用百分比的值,依赖于它的offset parent。还有em、vh等其他单位也依赖于他们的环境。

我们使用translate来代替left

XHTML

<style> #a, #b { position: absolute; } #a { left: 10px; top: 10px; z-index: 2; animation: move 1s linear; } #b { left: 50px; top: 50px; z-index: 1; } @keyframes move { from { transform: translateX(0); } to { transform: translateX(70px); } } </style> <div id="#a">A</div> <div id="#b">B</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
#a, #b {
position: absolute;
}
 
#a {
left: 10px;
top: 10px;
z-index: 2;
animation: move 1s linear;
}
 
#b {
left: 50px;
top: 50px;
z-index: 1;
}
 
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(70px); }
}
</style>
<div id="#a">A</div>
<div id="#b">B</div>

浏览器在动画执行之前就知道动画如何开始和结束,因为浏览器没有看到需要reflow和repaint的操作;浏览器就会画两张图像作为复合层,并将它们传入GPU。

这样做有两个优势:

  • 动画将会非常流畅
  • 动画不在绑定到CPU,即使js执行大量的工作;动画依然流畅。

看起来性能问题好像已经解决了?在下文你会看到GPU动画的一些问题。

   -webkit-transform: translate3d(0, 0, 0);

GPU动画的优点和缺点

现在我们可以总结一下GPU动画的优点和缺点:

  • 每秒60帧,动画平滑、流畅。
  • 一个合适的动画工作在一个单独的线程,它不会被大量的js计算阻塞。
  • 3D“变换”是便宜的。

缺点:

  • 提升一个元素到复合层需要额外的重绘,有时这是慢的。(即我们得到的是一个全层重绘,而不是一个增量)
  • 绘图层必须传输到GPU。取决于层的数量和传输可能会非常缓慢。这可能让一个元素在中低档设备上闪烁。
  • 每个复合层都需要消耗额外的内存,过多的内存可能导致浏览器的崩溃。
  • 如果你不考虑隐式合成,而使用重绘;会导致额外的内存占用,并且浏览器崩溃的概率是非常高的。
  • 我们会有视觉假象,例如在Safari中的文本渲染,在某些情况下页面内容将消失或变形。
  • 3D 或者 CSS transform
  • <video> 和 <canvas> 标签
  • CSS filters
  • 元素覆盖时,比如使用了 z-index 属性

动画中只使用transform和opacity

如上所说,transform和opacity保证了元素属性的变化不影响文档流、也不受文档流影响;并且不会造成repaint。有些时候你可能想要改变其他的css属性,作为动画。例如:你可能想使用background属性改变背景:

CSS

<div class="bg-change"></div> .bg-change { width: 100px; height: 100px; background: red; transition: opacity 2s; } .bg-change:hover { background: blue; }

1
2
3
4
5
6
7
8
9
10
<div class="bg-change"></div>
.bg-change {
  width: 100px;
  height: 100px;
  background: red;
  transition: opacity 2s;
}
.bg-change:hover {
  background: blue;
}

在这个例子中,在动画的每一步;浏览器都会进行一次重绘。我们可以使用一个复层在这个元素上面,并且仅仅变换opacity属性:

XHTML

<div class="bg-change"></div> <style> .bg-change { width: 100px; height: 100px; background: red; } .bg-change::before { content: ''; display: block; width: 100%; height: 100%; background: blue; opacity: 0; transition: opacity 20s; } .bg-change:hover::before { opacity: 1; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="bg-change"></div>
<style>
.bg-change {
  width: 100px;
  height: 100px;
  background: red;
}
.bg-change::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: blue;
  opacity: 0;
  transition: opacity 20s;
}
.bg-change:hover::before {
  opacity: 1;
}
</style>

   -ms-perspective: 1000;

优化技巧总结

  • 减少浏览器的重排和重绘的发生。
  • 不要使用table布局。
  • css动画中尽量只使用transform和opacity,这不会发生重排和重绘。
  • 尽可能地只使用css做动画。
  • 避免浏览器的隐式合成。
  • 改变复合层的尺寸。

   -webkit-perspective: 1000;

减小复合层的尺寸

看一下两张图片,有什么不同吗?

图片 11

这两张图片视觉上是一样的,但是它们的尺寸一个是39kb;另外一个是400b。不同之处在于,第二个纯色层是通过scale放大10倍做到的。

XHTML

<div id="a"></div> <div id="b"></div> <style> #a, #b { will-change: transform; } #a { width: 100px; height: 100px; } #b { width: 10px; height: 10px; transform: scale(10); } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="a"></div>
<div id="b"></div>
 
<style>
#a, #b {
will-change: transform;
}
 
#a {
width: 100px;
height: 100px;
}
 
#b {
width: 10px;
height: 10px;
transform: scale(10);
}
</style>

对于图片,你要怎么做呢?你可以将图片的尺寸减少5%——10%,然后使用scale将它们放大;用户不会看到什么区别,但是你可以减少大量的存储空间。

2硬件加速原理

优化技巧

   -ms-backface-visibility: hidden;

渲染优化原理

如上所说,渲染树构建完成后;浏览器要做的步骤:

reflow——》repaint——》composite

   /* Other transform properties here */

reflow和repaint

reflow和repaint都是耗费浏览器性能的操作,这两者尤以reflow为甚;因为每次reflow,浏览器都要重新计算每个元素的形状和位置。

由于reflow和repaint都是非常消耗性能的,我们的浏览器为此做了一些优化。浏览器会将reflow和repaint的操作积攒一批,然后做一次reflow。但是有些时候,你的代码会强制浏览器做多次reflow。例如:

JavaScript

var content = document.getElementById('content'); content.style.width = 700px; var contentWidth = content.offsetWidth; content.style.backgound = 'red';

1
2
3
4
var content = document.getElementById('content');
content.style.width = 700px;
var contentWidth = content.offsetWidth;
content.style.backgound = 'red';

以上第三行代码,需要浏览器reflow后;再获取值,所以会导致浏览器多做一次reflow。

下面是一些针对reflow和repaint的最佳实践:

  • 不要一条一条地修改dom的样式,尽量使用className一次修改。
  • 将dom离线后修改
    • 使用documentFragment对象在内存里操作dom。
    • 先把dom节点display:none;(会触发一次reflow)。然后做大量的修改后,再把它显示出来。
    • clone一个dom节点在内存里,修改之后;与在线的节点相替换。
  • 不要使用table布局,一个小改动会造成整个table的重新布局。
  • transform和opacity只会引起合成,不会引起布局和重绘。

从上述的最佳实践中你可能发现,动画优化一般都是尽可能地减少reflow、repaint的发生。关于哪些属性会引起reflow、repaint及composite,你可以在这个网站找到。

.cube {

隐式合成

还记得刚才a元素和b元素动画的例子吗?现在我们将b元素做动画,a元素静止不动。

图片 12

和刚才的例子不同,现在b元素将拥有一个独立复合层;然后它们将被GPU合成。但是因为a元素要在b元素的上面(因为a元素的z-index比b元素高),那么浏览器会做什么?浏览器会将a元素也单独做一个复合层!

所以我们现在有三个复合层a元素所在的复合层、b元素所在的复合层、其他内容及背景层。

一个或多个没有自己复合层的元素要出现在有复合层元素的上方,它就会拥有自己的复合层;这种情况被称为隐式合成。

浏览器将a元素提升为一个复合层有很多种原因,下面列举了一些:

  • 3d或透视变换css属性,例如translate3d,translateZ等等(js一般通过这种方式,使元素获得复合层)
  • <video><iframe><canvas><webgl>等元素。
  • 混合插件(如flash)。
  • 元素自身的 opacity和transform 做 CSS 动画。
  • 拥有css过滤器的元素。
  • 使用will-change属性。
  • position:fixed。
  • 元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

这看起来css动画的性能瓶颈是在重绘上,但是真实的问题是在内存上:

可是在一些情况下,我们并不需要对元素应用3D变换的效果,那怎么办呢?这时候我们可以使用个小技巧“欺骗”浏览器来开启硬件加速。

为什么 transform 没有触发 repaint 呢?简而言之,transform 动画由GPU控制,支持硬件加速,并不需要软件方面的渲染。

CSS animations, transforms 以及 transitions 不会自动开启GPU加速,而是由浏览器的缓慢的软件渲染引擎来执行。那我们怎样才可以切换到GPU模式呢,很多浏览器提供了某些触发的CSS规则。

filter

.cube {

.cube {

 

transform

 

}

   -ms-transform: translateZ(0);

因为 transform 属性不会触发浏览器的 repaint(重绘),而绝对定位absolute中的 left 和 top 则会一直触发 repaint(重绘)。

   transform: translateZ(0);

CSS transform 会创建了一个新的复合图层,可以被GPU直接用来执行 transform 操作。

浏览器什么时候会创建一个独立的复合图层呢?事实上一般是在以下几种情况下:

   -moz-transform: translate3d(0, 0, 0);

   rotate3d(250px,250px,250px,-120deg)

.cube {

   scale3d(0.5, 0.5, 0.5);

 

就是将浏览器的渲染过程交给GPU处理,而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。

元素覆盖时,比如使用了 z-index 属性

在webkit内核的浏览器中,另一个行之有效的方法是

 

现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。

 

现在,像Chrome, FireFox, Safari, IE9 和最新版本的Opera都支持硬件加速,当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启,最显著的特征的元素的3D变换。

   -moz-backface-visibility: hidden;

}

4并不是所有的CSS属性都能触发GPU的硬件加速,实际上只有少数属性可以,比如下面的这些:

   -ms-transform: translate3d(0, 0, 0);

6.使用硬件加速的问题

 

  /* Other transform properties here */

使用硬件加速并不是十全十美的事情,比如:

总结

在 Chrome and Safari中,当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果,下面的代码可以修复此情况:

   perspective: 1000;

只对我们需要实现动画效果的元素应用以上方法,如果仅仅为了开启硬件加速而随便乱用,那是不明智的。

opacity

虽然我们可能不想对元素应用3D变换,可我们一样可以开启3D引擎。例如我们可以用transform: translateZ(0); 来开启硬件加速 。

1. 何为硬件加速

   -o-transform: translateZ(0);

   /* Other transform properties here */

浏览器接收到页面文档后,会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素,每一个渲染元素会被分到一个图层中,每个图层又会被加载到GPU形成渲染纹理,而图层在GPU中transform 是不会触发 repaint 的,最终这些使用 transform 的图层都会由独立的合成器进程进行处理。

1内存。如果GPU加载了大量的纹理,那么很容易就会发生内容问题,这一点在移动端浏览器上尤为明显,所以,一定要牢记不要让页面的每个元素都使用硬件加速。

例如:

}

3 为什么硬件加速会使页面流畅

   backface-visibility: hidden;

 

原生的移动端应用(Native mobile applications)总是可以很好的运用GPU,这是为什么它比网页应用(Web apps)表现更好的原因。硬件加速在移动端尤其有用,因为它可以有效的减少资源的利用(移动端本身资源有限)。

   -webkit-transform: translateZ(0);

2使用GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制。即使最终硬件加速停止了,文本还是会在动画期间显示得很模糊。

小心使用这些方法,如果通过你的测试,结果确是提高了性能,你才可以使用这些方法。使用GPU可能会导致严重的性能问题,因为它增加了内存的使用,而且它会减少移动端设备的电池寿命。

   -moz-perspective: 1000;

我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能

 

<video> 和 <canvas> 标签

5.如何在桌面端和移动端用CSS开启硬件加速

}

版权声明:本文由彩民之家高手论坛发布于前端知识,转载请注明出处:用CSS开启硬件加速来抓牢网址质量