分享的示例
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
最上边的
B``G``W``E分别代表的是：Blink(Chrome), Gecko(火狐),WebKit(Safari),EdgeHTML(Edge的内核，不过微软已经宣布Edge 浏览器将切换至 Chromium 内核，也就是blink)。左侧显示的css属性。左边的BGWE是设置属性(从默认值修改，相当于一开始没设置css)。右边的BGWE是修改属性(对现有的属性值进行修改)
下面每个小方块的颜色就是对应的渲染流程中触发的方法。
从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情况下，形成合成层的元素太多，会很消耗内存，所以需要做一个平衡。
网友评论