中级性能优化

1. 重绘和重排 网站整体性能渲染

1.1 获取DOM 分割层
1.2 根据每层的节点结算央视结果 Recalculate Style
1.3 为每个节点生成图形和位置 Layout
1.4 将每个节点回执填充到当前帧的图层位图中 Paint
1.5 根据符合要求的多个图层合并生成图像 给你看 Composite Layers

2. 总结渲染阶段 Layout -> Paint -> Composite Layers
3. 什么情况下分层？

根元素， Position, transform, transform3d, 半透明， 滤镜， canvas, video, overflow
什么情况下GPU直接参与？
css3d, video, webgl, transform, 滤镜 硬件加速

4. 重排紧接着就会重绘 重绘不一定会引起重排
5. 优化方法

对于样式的读写操作，应该读在一起，写在一起，不要穿插着放，并且使用requestAnimationFrame写入。

下面是示意图
在使用定位的情况下渲染效果

使用transform3d 的效果

可以看到在transform3d的作用下，浏览器直接跳过了layout 和 paint 的阶段，到了 Composite Layers阶段，而且在开启 Paint flashing 选项的情况下，页面也看不到绿色的重绘

TTFP 当你打开网站的时候，服务器给你返回（用户接收到）的第一个字节的时间
FP 首屏绘制时间
FCP 首次有内容的绘制
FMP 首次有意义的绘制
TTI 可交互的时间