网页是3D分层的
FPS帧--网页是一帧一帧渲染的，每秒60帧会非常流畅
Performance --> Summary
- Loding 页面loading时间 生成dom树 和css树
- Scripting 脚本执行时间
- Rendering 重排
- Painting 重绘
- System 系统时间
- Idle 空闲时间
网页渲染过程：
- 获取dom节点，分割成多个层 Parse HTML
Performance -->Call Tree 的时候要把HTML的dom树分层
- 对每个层计算样式结果 (通过Recalculate Style来计算样式结果)
- 为每个节点生成图形和位置重排layout
- 将每个节点绘制并填充到图层的位图中 重绘paint
- 绘制出来的纹理长传到GPO 这一步是合成 层Composite Layers
大致的流程：重排、重绘、合成
网页什么时候会分层？
1. 根元素
2. position
3. transform
4. 半透明
5. 滤镜
6. canvas
7. video
8. overflow
GPU的参与
-
参与的好处：跨过重绘和重排，直接用GPU合成层
-
什么时候参与：
1. css3D
2. video
3. webGL
4. transform
5. css滤镜
CPU和GPU
- 相同之处：
两者总有总线和外界联系
有自己的缓存体系、以及数字和逻辑运算单元
都是为了完成计算任务
- 不同之处：
CPU操作系统和应用程序，GPU显示相关（CPU虽然能干，但是效率低）
读取有些属性的时候会造成重排
重绘不一定造成重排，但是重排一定重绘
-
为什么读取某些属性会造成重排？ 因为他会释放掉当前计算的当前任务
-
读取哪些属性会造成重排 offset相关的 scroll width height
-
怎么解决 读写分离 把会造成重排的属性先定义成变量，等到下一帧的时候再去设置相关的值
-
获取下一帧：
requestAnimationFrame
requestIdleCallback
一帧的时间：1000/60 = 16.6毫秒
