现代浏览器工作原理（三）现代浏览器工作原理（三）——渲染流程渲染流程
渲染流程就是浏览器展示页面的流程，在这个流程里，浏览器通过获取到服务端返回的HTML、CSS和JS等静态资源进行处理并展示出页面，这里经过的流程按时间线分的话有：构构
建建DOM树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成，是为一个渲染流水线。其中面试的时候经常会问到的回流（重排reflow）和重绘（repaint）也是出在这个渲染
流程里，下面来逐个步骤的说明讲解。
一、构建一、构建DOM树（树（DOMTree））
我们知道，浏览器是无法直接理解和使用HTML的，为了能让浏览器理解我们写的HTML，所以需要将HTML转换为浏览器能够理解的结构，这个就被称为DOM树。这个过程里，我
们输入HTML代码，在经过HTML解释器进行解析之后，就会输出DOM树，如下图，左图是HTML代码，右图是经过HTML解释器解析之后的DOM树：
我们可以在控制台上输入document也可以看到经过HTML解析器解析之后完整的DOM树的结构:
图中的 document 就是 DOM 结构，你可以看到，DOM 和 HTML 内容几乎是一样的，但是和 HTML 不同的是，DOM 是保存在内存中树状结构，可以通过 JavaScript 来查询或修改
其内容。
在这一步通常会遇见几个面试中会问到的问题，比如JavaScript会不会阻塞DOM树的解析，现在就来回答一下。当我们在当我们在body标签里加入标签里加入JavaScript代码，比如代码，比如script标签下就是一标签下就是一
段写好的段写好的JavaScript代码，这个时候代码，这个时候HTML解释器执行到这里是会执行完解释器执行到这里是会执行完JavaScript脚本，之后在往下解析，所以是会阻塞脚本，之后在往下解析，所以是会阻塞DOM解析器的解析。如图：解析器的解析。如图：
资源评论
