我记得前同事考我一个题，position：fixed相对于什么进行定位？我想大多数人回答是相对于viewport定位吧。那如何相对于父元素进行定位呢？这个时候是不是就有点懵逼了？

我们看看正解。源自https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

why？

其实祖先元素只要触发”gpu加速“，就可以比如scale等。不信自己试试。

GPU加速发生在哪个阶段？

是真的加速？还是合成呢？

在你打开浏览器的那一刹那，渲染合成的路径就已经决定了。不以开发者的意志为转移。

3d transform的唯一作用就是会生成一个全新的合成层，这么做得好处就是发生在该层中的动画都会单独绘制，其他层就避免了重绘等操作。这对渲染性能是有提升的。但是由于大家对浏览器合成的概念过于陌生，GPU加速的概念就这么传播开了。实际上，GPU合成这个名字更贴切。

“GPU加速”带来最大的恶劣影响就是3D transform被滥用。过多的合成层并不会显著提升性能，反而会带来意想不到的性能问题！

在你想测试前，请根据：https://www.css88.com/doc/chrome-devtools/settings/

在chrome开发者面板中打开对应工具。然后通过图示进行测试和查看。

我们同时需要工具栏的Performance，进行性能报告观察。

简单动画left

整个动画过程在疯狂反复的layout-paint我们的动画是应用在left这种关系到元素布局位置的属性身上。所以会反复触发回流和重绘。上一篇文中涉及到的所有步骤在每一帧中都会经历一遍。

这种动画的实现其实就是在每一帧都在屏幕上重新绘制一个全新的元素。

用transform代替left动画。

大量的回流都消失了。

如果你自己去浏览器再回过头去看看我们第一次“left动画”的paint。会发现每次的绘制都是红色和蓝色的最终图像。而现在chrome将动画层暂时提升出来，等到动画结束后再最终paint。

动画的实现从逐帧绘制改变成图层。对动画的图层进行整体移动。

我们在用文章开始提到的工具layers。

工具介绍

然后我们改进一下，用transform引入gpu加速。

前两次paint依然会单独绘制两个div，但是第三次paint消失了。因为红色div被单独提升为一个合成层了。动画结束时不需要重新绘制了。我们用layers，会发现有两个合成层。

那是不是给每个元素都放在单独的合成层里是不是就提高性了呢？

合成层会占用系统内存与GPU(在移动设备上尤其有限)的内存，并且拥有大量的合成层会因为记录哪些是可见的而引入额外的开销。

1，内存消耗：比如滚动会带来的内存消耗，再比如在一个循环列表中，将循环创建合成层。每一个合成层都需要内存和管理，他们都不是免费的！在内存有限的设备上，对性能的影响可能远远超过创建层带来的任何好处。

2，过度绘制：什么是过度绘制，就是那些本没有必要绘制的画面也都被绘制出来了。我们添加了一个新的divC。不过这个divC的位置和B是重叠的，显示器上根本看不见。

3，隐式合成：不靠手动触发，在你不知情的情况下被动触发。

这个动画会paint3次。document带着B一次，A一次，C一次。如果你还记得transform动画的实现原理就知道，GPU会移动整个层。而A夹在B和C之间，A自身提升为合成层没有问题。但B和C还能为同一层吗？根本办不到。A的提升硬生生的把B和C切割为两个图层，等到动画结束后，三层再归一。

以上就是gpu合成的介绍，gpu不会加速，只是把触发gpu“加速”的元素拿出来，单独放在一个层里。