JS动画在浏览器的实现步骤
js
1 .使用js实现一些视觉变化的效果。
2 .比如做一个动画或者往页面里面添加一些dom元素等。
3 .
Style：计算样式
1 .根据css选择器，对每个dom元素匹配对应的css样式
2 .确定每个DOM元素上该使用什么css样式规则
layout:布局
1 .具体计算每个远不的布局变化，确定do'm元素在屏幕上最终显示的大小和位置
2 .web页面中元素的布局是相对的，因此一个元素的布局变化会相应的联动其他元素的布局变化，body的宽度变化会影响器子元素的宽度，子元素宽度的变化也会继续对其他子孙元素产生影响。
3 .DOM树中每个node节点都有一个对应的layoutObject,这个里面知道如何在屏幕上print node的内容
paint:绘制，填充像素
1 .包括绘制文字，颜色，图像，边框，影音，也就是一个dom元素的所有可视效果，一般来说，这个绘制过程是在多个层上完成的
2 .拥有相同坐标控件的LayoutObjects，属于同一个渲染层paintLayer
3 .满足层叠上下文条件的layoutIbjects一定回味其创建新的渲染层，当然还有其他的一些特殊情况，为一些特殊的layoutObjects创建一个新的渲染层。
composite:渲染层合并
1 .对页面中dom元素的绘制是在多个层上进行。
2 .在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上。
3 .
合成层
1 .某些特殊的渲染层别认为是合成层，合成层由单独的GraphicsLayer，而其他不是合成层的渲染层，则和第一个拥有GraphicsLayer父层公用一个。
2 .每个GraphicsLayer都有一个GraphicsContext，负责输出多个位图进行合成，然后draw到屏幕上。
3 .合成层的位图，会交由GPU合成，比cpu处理要快
4 .当需要repaint时只需要repaint本身，不会影响到其他层
5 .对于transform和opacity效果，不会触发layout和paint
6 .合成层的好处是不会影响到其他元素的绘制，因此为了减少动画元素对其他元素的影响，从而减少paint，我们要把动画效果中的元素提升为合成层
7 .
满足直接原因进行合并
1.硬件加速的iframe元素，比如嵌入到页面的iframe元素
2.video元素
3.覆盖在video元素上的视频控制栏
4.3D或者硬件加速的2Dcanvas元素
5.硬件加速的插件，比如flash
6.在dpi较高的屏幕上，fixed定位的元素会自动的被提升到合成层中，但是dpi较低的设备上不会
7.3d transform
8.animation
9.transition元素
10.will-change:设置为opacity,transform,top,left,bottom,right ---这个是提升为合成层的最佳方法
11.不支持的will-change的浏览器：transform:translateZ(0)
后代元素原因
1.有合成后代同时本身有transform,opacity，mask,filterreflection属性
2.合成层后代同时本身fixed定位
3.3dtransform的合成层后代本身有preserves-3d
重叠原因
1.重叠会产生合成层
2.由于重叠的原因，可能随便就会产生大量的合成层，因此就有了层压缩的处理，如果多个渲染层童一个合成层重叠时，这些渲染层会被压缩到一个GraphicsLayer中，防止由于重叠原因导致的层爆炸
层叠上下文
1 .层叠上下文是html元素的三维概念，这些html元素在一条假想的面对于面向电脑屏幕视窗或者网页的用户的z轴上延伸，html元素依据其自身属性按照优先级顺序占用层叠上文空间。
2 .层叠上下文由满足以下任意一个条件的元素形成
1 .根元素html
2 .z-index值不为“auto”的绝对/相对定位
3 .opacity属性值小于1的元素
4 .transform属性值不为“none”的元素
5 .filtre值不为“none”的元素
6 .
优化
1 .最理想的渲染流水线是没有布局和绘制环节，只需要做合成层的合并即可
2 .目前只有两个属性是满足这个条件：transform,opacity。
3 .更加详细的是查询https://csstriggers.com/
4 .元素提升为合成层后，transform,opacity才不会触发paint，如果不是合成层，则其依然会触发paint
5 .减少绘制区域：对于不需要重新绘制的区域应该尽量避免绘制，以减少绘制区域。
高级特性--管理合成层
1 .由于每个渲染层的纹理都需要上传到GPU处理，因为我们还需要考虑CPU和GPU之间的带宽问题，以及有多大内存供CPU处理这些纹理的问题
2 .防止层爆炸--这个还是有点不懂
