分享的示例
https://github.com/TingYinHelen/performance

上周在fcc分享了一次浏览器的渲染性能调优，在分享的过程中大家问到一些问题，并且在分享之后，我自己也发现了一点问题，所以想写一篇文章来总结和复盘。

问：z-index和合成层有关系吗
答：z-index跟合成层没有关系，跟渲染层有关系。
参考： 层叠上下文

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间

渲染层保证页面元素以正确的顺序合成，这样才能正确的展示元素的重叠和半透明等等。满足形成层叠上下文条件的LayoutObject就会为其创建新的渲染层。

文档中的层叠上下文由满足以下任意一个条件的元素形成：

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位，
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
• opacity 属性值小于 1 的元素（参考 the specification for opacity），
• transform 属性值不为 "none"的元素，
• mix-blend-mode 属性值不为 "normal"的元素，
• filter值不为“none”的元素，
• perspective值不为“none”的元素，
• isolation 属性被设置为 "isolate"的元素，
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
• -webkit-overflow-scrolling 属性被设置 "touch"的元素

某些特殊的渲染层会被认为是合成层。合成层有单独的GraphicsLayer。
渲染层提升为合成层的情况：

• 3D transform
• iframe
• video
• 3D 或者 硬件加速的 2D Canvas 元素
• will-change
  等

问：什么工具可以查看css的属性改变触发渲染的方法
答：可以查看：https://csstriggers.com/
这个网站注明了在不同的浏览器内核下，每种css属性在默认和改变时会触发哪一种渲染操作，后面会有详细解释。

问：这次分享的是针对的什么渲染引擎
答：blink
这里说一点点浏览器的历史吧，最开始Chrome是用的苹果公司的webkit，后来谷歌和苹果产生了分歧，谷歌从webkit中复制了一个blink项目，所以我们分析渲染性能是针对的blink。对浏览器渲染引擎感兴趣的可以看
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
WebKit技术内幕

虽然blink是webkit的一个分支，但是有很多细节不同。首先，谷歌把webkit的代码梳理得可读性很高，比如RenderObject变成了LayoutObject，RenderLayer变成了PaintLayer。所以这里我需要修正一下分享时的渲染的流程图，现在blink内核的渲染流程图是下面这个。

当然除了代码可读性高了，渲染的细节也有改变。
分享的时候有人问到为什么我用了transform但是在Layer tab没有看到合成层。下来我查证了一下，先看一下下面这张css trigger的图

image.png

从transform 会触发的方法可以看到，在blink下只触发了Composite，而在Webkit下触发了Layout，Paint，Composite。从上面列举的会触发合成层产生情况，可以看出，transform只有在3d的情况下才会形成合成层，而在2d的情况下是没有合成层的，

上面这个是我分享的优化成了了transform的例子。
如果我把每个小方块都改成3d渲染，layer显示应该是这样的

所以这里需要修正我所讲的，transform都会形成合成层，正确的解释应该是：
在所有引擎下transform 2d并不会形成合成层，只有3d才会形成合成层
在blink引擎下，本身transform 2d不会触发layout和paint，而在webkit引擎下仍然会触发layout和paint。
所以chrome提升动画性能仍然可以讲会触发layout和paint的动画操作改为transform。但是如果是3d情况下，形成合成层的元素太多，会很消耗内存，所以需要做一个平衡。