当我们向服务器发送请求，返回数据时,浏览器是如何将js和css,html，转换成我们看到的页面呢？ HTML的内容是由标记和⽂本组成。标记也称为标签，每个标签都有它⾃⼰的语意，浏览器会根据标签的语意来正确展⽰HTML内容。⽐如
标签是告诉浏览器在这⾥的内容需要创建⼀个新段落，中间的⽂本就是段落中需要显⽰的内容。 按照渲染的时间顺序，渲染过程可分为如下⼏个⼦阶段：构建DOM树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。内容⽐较多，我会⽤两篇⽂章来为你详细讲解这各个⼦阶段。
开始每个⼦阶段都有其输⼊的内容；
然后每个⼦阶段有其处理过程；
最终每个⼦阶段会⽣成输出内容。
浏览器⽆法直接理解和使⽤HTML，所以需要将HTML转换为浏览器能够理解的结构——DOM树。 如document为根节点，body和head为子节点，依次向下扩展。可在谷歌控制台里打印document查看最终形成的dom树。 构建DOM树的输⼊内容是⼀个⾮常简单的HTML⽂件，然后经由HTML解析器解析，最终输出树状结构的DOM。
和HTML⽂件⼀样，浏览器也是⽆法直接理解这些纯⽂本的CSS样式，所以当渲染引擎接收到CSS⽂本时，会执⾏⼀个转换操作，将CSS⽂本转换为浏览器可以理解的结构—styleSheets。 可在谷歌控制台里打印document.styleSheets查看样式表结构。
可以看到CSS⽂本中有很多属性值，如2em、blue、bold，这些类型数值不容易被渲染引擎理解，所以需要将所有值转换为渲染引擎容易理解的、标准化的计算值，这个过程就是属性值标准化。 如2em被解析成了32px，red被解析成了rgb(255,0,0)，bold被解析成了700px等
层叠是CSS的⼀个基本特征，它是⼀个定义了如何合并来⾃多个源的属性值的算法。它在CSS处于核⼼地位，CSS的全称“层叠样式表”正是强调了这⼀点。
我们有DOM树和DOM树中元素的样式，但这还不⾜以显⽰⻚⾯，因为我们还不知道DOM
元素的⼏何位置信息。那么接下来就需要计算出DOM树中可⻅元素的⼏何位置，我们把这个计算过程叫做布局。
Chrome在布局阶段需要完成两个任务：创建布局树和布局计算。
浏览器⼤体上完成了下⾯这些⼯作：遍历DOM树中的所有可⻅节点，并把这些节点加到布局中； ⽽不可⻅的节点会被布局树忽略掉，若它的属性包含 dispaly:none等。
