了解浏览器

一、浏览器的Layout Tree和DOM Tree

1. layout布局阶段：主线程通过遍历DOM 和计算好的样式来生成Layout Tree。
2. Layout Tree 上的每个结点都记录了x,y坐标和边框尺寸。
3. DOM Tree和Layout Tree并不是一一对应的，使用伪类控制的元素不会出现在DOM Tree结点中，只会出现在Layout Tree 结点中。这也是JS无法控制伪类的原因。设置了display:none的元素不会出现在Layout Tree中，只会出现在DOM Tree中。
4. Layout Tree和最后显示在屏幕上的结点是一致的

二、浏览器渲染流程

1. 主线程，合成线程，栅格线程
   • 主线程：DOM，style,layout,paint,layer
   • 合成器线程：tiles , frame
   • 栅格线程：raster, draw quads
2. 重排和重绘
3. 布局绘制和JS都是在主线程运行的，当在一的时间内布局和绘制结束后还有剩余时间，JS就可以获得主线程控制权，若JS执行时间过长会导致没有及时归还主线程，主线程无法及时渲染下一帧动画，从而造成页面卡顿。
   • 优化动画：requestAnimationFrame() ,这个方法会在每一帧被调用。把JS运行任务分成更小的任务快，在每一帧的时间用完前暂停JS执行，归还主线程。在下一帧开始时主线程就可以按时执行布局和绘制。
   • Transform实现的动画不会经过布局和绘制，而是直接运行在合成器线程和栅格化线程中。

三、持续补充中……