在描述这个过程之前，先理解一个概念。
解析
浏览器需要把HTML或者CSS等文档转化成自己能够理解的语法结构，这个过程就叫解析。通常是讲文档解析成相应结构的节点树（解析树或语法树）。
解析可以分为两个步骤：1、词法分析；2、语法分析。
词法分析将内容划分成一个个单独的语法单元（也可以称作标记）。
语法分析将这些标记通过相应的语法规则进行匹配，将对应的节点添加到解析树中。
分割线---------------------------
浏览器从获取网络资源（HTML、CSS、图片等），到页面展示，可以分为以下几个过程：
1、解析HTML
2、解析样式信息
3、构建呈现树
4、布局/重排
5、绘制
下面简要描述一下各个过程。
解析HTML
HTML文档由HTML解析器进行解析，得到由DOM元素和属性节点构成的解析树（DOM树）。DOM是HTML的对象表示，是外部（如JavaScript）与HTML元素之间的接口。
解析样式信息
在解析HTML的同时，相关解析器会解析外部CSS文件等样式信息。
构建呈现树
将DOM元素与样式信息中的基本样式（除大小、位置）属性"结合"，构成呈现器。呈现器可以看作是节点带上样式之后形成的一个矩形区域。
呈现器被添加到呈现树中。
呈现树与DOM树的区别在于，DOM树与HTML标签一一对应，而呈现树只对应将会显示在屏幕上的HTML元素。
非可视化元素不会构成呈现器。例如head元素或者display为none的元素不会出现在呈现树中，而visibility为hidden的元素仍会显示。
布局/重排
呈现树只是一个个带有样式的矩形，现在需要计算它们的大小和位置信息并且进行流式的拼接，这个过程就叫布局。
当我们修改了某些样式（如字体大小）或者调整窗口大小，影响了全部或局部呈现器的位置，这时需要进行全局或局部的重新布局，也叫重排。