浏览器调试——Timeline掌控帧渲染模式

网页动画能够做到每秒60帧，就会跟显示器同步刷新，一秒之内进行60次重新渲染，每次重新渲染的时间不能超过16,66毫秒

黄色：JavaScript执行
紫色：样式计算和布局，及重排
绿色：重绘

window.requestAnimationFrame() // 下一次

window.requestldleCallback() // 下几次重新渲染时间

触发分层

1.获取DOM并将其分割为多个层
2.将每个层独立的绘制进位图中
3.将层作为纹理上传至GUP
4.复合多个层来生成最终的屏幕图像

1.DOM子树渲染层（RenderLayer）RenderObject->GraphicsContext（根元素、position、transform、半透明、CSS滤镜、Canvas2D、video、溢出）；
2.Compositor->渲染层子树的图形层