中级性能优化

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 可交互的时间