浏览器的渲染过程

• 生成DOM 树：首先解析收到的文档(html)，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的网页结构框架。
• 生成CSSOM 规则树：然后对 CSS 进行解析，生成 CSSOM 规则树,它决定了网页的样式。
• 构建成渲染树：将 DOM树 和 CSSOM规则树 构建成 渲染树(Render Tree)。
• 布局阶段：浏览器开始计算布局（元素位置信息，大小等等），计算层级，position z-index会导致产生新的层，渲染还会对区域进行分块。接下来图层绘制（画像素，媒体文件解码），最后图层合并，GPU绘制。
• 绘制阶段：布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的paint方法，将它们的内容显示在屏幕上，绘制使用 UI 基础组件，遇到script标签则暂停渲染，优先加载并执行JS代码，执行完后再继续渲染（js线程和dom渲染线程是共用一个线程的；因为js有可能会改变dom结构有可能改变Render Tree结构），所以 我们要把js放在末尾避免它堵塞加载渲染页面；Css如果没有解析完 rendertree会构建不了，样式放在底部可能会导致重绘，所以css 要放前面尽早加载出来。
• 直至把Render Tree渲染显示完成