1.有一个Html解析器，解析Html，生成DOM结构
转换：浏览器从磁盘或网络读取 HTML 的原始字节，然后根据指定的文件编码格式（例如 UTF-8 ）将其转换为相应字符
DOM 构建：因为 HTML 标记定义不同标签间的相互关系（某些标签嵌套在其他标签中），所以创建的对象在树状数据结构中互相链接，树状数据结构还捕获原始标记中定义的父子关系：比如 HTML 对象是 body 对象的父对象， body 是 paragraph 对象的父对象等等
2.有一个CSS解析器，解析CSS样式表，生成链式表
CSS 规则转换的过程跟 HTML 相似，如下图：
3.DOM树和样式表的相结合生成一个Render树，这个Render树会给每一个节点进行绘制，每个节点有一个attach的方法用来接收样式
（将DOM树和样式表关联起来，创建一颗Render树。这一过程又被称为Attachment，每个DOM节点上都有一个attach方法，会接收对应的样式表，返回一个render对象。这些render对象最终会结合成一个render tree；）
<script> 、<style>、display: none;等）
4.浏览器根据渲染的节点在页面上进行渲染
有了render tree后，浏览器就可以为render tree上的每个节点在屏幕上分配一个精确的位置坐标，然后各个节点会调用自身的paint方法结合坐标信息，在浏览器中绘制中整个页面了。
