CSS动画原理及硬件加速 – 很好玩

一、图层

  层成堆语境,详细向某人点头或摇头示意和器械一切的可以看我预先阻止转自张鑫旭超自然力视频博客的《CSS层叠语境和层叠挨次》,在在这一点上,咱们审察的解释很复杂,开端语境堆栈。

1。层的树立
指的是翻页的根元素,是默许的骨碌条是始作俑者元素。这执意为什么,绝对使就座元素left/top当当量的使就座,假定缺席那个的使就座要因的限度局限,使就座相朝一方向的浏览程序窗口的解释。

2。与移交层叠语境使就座元素
朝一方向的包重要性绝对使就座:/使就座:绝对的使就座元素,连同FireFox/IE浏览程序(除非Chrome等webkit内核浏览程序)(眼前,这是在2016年首的方法)使就座:经过作弊预先安排好结果的供述使就座元素,当其z-index价责备auto的时辰,将使成为地层叠语境。

在新的时代树立下的累积

  下面将产生一新的语境堆栈:

  • 绝对或绝对使就座z-index价不auto
  • 扩建工程Flex Item,且 z-index价不auto,这是父元素display: flex|inline-flex
  • 元素的 mix-blend-mode属性值不normal
  • 元素的 isolation 属性值为 isolate
  • will-change无论哪个命名的是你这么说的嘛!属性,平坦的你缺席指示方向下定义这些属性
  • 元素的 -webkit-overflow-scrolling 属性值为 touch

二、应用绝对使就座 左上实施活泼

CSS活泼之硬件加速

  是在绿色条纹表现应用是你这么说的嘛!档案top 和 left当浏览程序实施活泼 repaint 买卖,Can be seen from far below the animation frames60 帧。

  从 chrome 比照功绩器ESC选择后 “rendering” 面板,咱们可以选择使 piant 闪烁的更监督 repaint 买卖。假定即将到来的选择是,在翻页上 repaint 地面将是绿色面具的发光点。重行应用 top 和 left一演示的探察,你会发现物地面包球会一向闪烁的绿色面具。

CSS活泼之硬件加速

  比照知识,更改元素将产生重排。,为什么在下面的绘制地图显示的是重绘?为是什么绝对使就座,这不过赠送层的一元素。,最适当的的重绘,缺席重排。它还告知咱们,在同地层,当元素的数量是小的,重排功能更合适的,生涯会更快。

三、transform2d活泼的实施

  下图是应用CSS transform 检测到的档案:

CSS活泼之硬件加速

  如你所见,缺席过于的活泼演示程序 repaint 买卖。

  这么,为什么 transform缺席弹性 repaint 呢?长话短说,transform活泼是由GPU,后退硬件加速,不喜欢软件扩大。

四、硬件加速规律

  浏览程序收到翻页发送,在DOM树的使佩带像章允许宣誓后释放文档的剖析。接合DOM和CSS在浏览程序翻页方式割破。扩大树中重要性落落大方的扩大元素,每个扩大元素被划分为地层。,每地层特许市被负荷到GPU的扩大臂章,图层在GPU中transform是将不会弹性 repaint 的,终极这些应用 transform该层将由孤独的分解手法活动。

  在咱们的探察,CSS transform一种新的复合层已使成为,GPU可以指示方向用于管理transform 买卖。在Chrome功绩者器翻开显示 layer 边框选择,每个复合层会显示一黄色的禁闭:

  探察击中要害球在一孤独的复合层中。,此举同样孤独的更衣:

CSS活泼之硬件加速

此刻,你可能会问:浏览程序什么时辰会使成为一孤独的复合图层呢?说起来普通是在以下几种境况下:

  • 3D 或许 CSS transform
  •  和  附属物
  • CSS filters
  • 元素涉及,如应用z-index 属性

慢走,下面的探察是应用 2D transition 而责备 3D 的 transforms 啊?那是真的。,因而咱们可以参观在时期轴:在开端的两倍和活泼的完毕 repaint 买卖。

CSS活泼之硬件加速

  3D 和 2D transform 的分别就信赖,复合层的浏览程序扩大翻页使成为一孤独的活泼3D,并在运转拨准的快慢为2d活泼使成为。在活泼的开端,开端一新的复合层与承载initializatio GPU的臂章 repaint。这么复合GPU策划完全活泼的管理。经受住,当活泼完毕,再次管理 repaint 迅速离开复合层的买卖。

五、冲动GPU扩大

  并责备所相当CSS属性都能弹性GPU的硬件加速(图层在GPU中属性转变将不会弹性 repaint ),说起来,只罕见的属性可以,如以下:

  为了废止 2D transform 在活泼的出发和死的产生 repaint 买卖,咱们可以黾勉的处理即将到来的成绩的相当编码作风:

那 {
  transform: translateZ(0);
}

例2 {
  transform: rotateZ(360deg);
}

  此编码是让浏览程序实施的。 3D transform。经过浏览程序的方法使成为一独立的层,图层击中要害活泼则有GPU中止预调节而且弹性了硬件加速。

  假定一元素的在后面较远处是一复杂的元素,过后元素 repaint 买卖将破费落落大方的资源,此刻也可以应用下面的虚伪行为来缩减功能头顶上的。

六、应用硬件加速的成绩

  应用硬件加速并责备完美的典型的事实,比方:

  • 内存。假定GPU负荷落落大方的臂章,这么不费力地就会产生实质成绩,这在使位移航空站浏览程序中尤为明确的。,因而,一定要使牢固不要让翻页的每个元素都应用硬件加速。
  • 应用GPU扩大会支配抗锯齿状突起书写体铅字的胜利。这是由于GPU和CPU有有区别的的扩大机制。平坦的终极硬件加速中止了,本文将活泼显示很含糊时。

七、总结

  在这一点下面的逻辑是一杂乱的觉得,改组在在这一点上。率先,二者的变异和绝对使就座将产生一新的层,因而缺席重排,在GPU层变异并将不会落得重绘,这执意硬件加速的规律。在一边,差数transform3D和2D私下会产生一新层3,而在运转时开端的二维层,手术完毕时迅速离开图层。

注:本文在改组了南北在W3C上写的《CSS活泼之硬件加速》击中要害知识点,并做加法了本身的了解和总结