浏览器调试——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->渲染层子树的图形层