我们知道浏览器会把我们写的HTML，CSS等代码会渲染成页面，现在我们探讨一下
浏览器怎么样会把HTML文本渲染成页面呢？
渲染引擎
渲染引擎包括HTML解析器，CSS解析器，布局和JS引擎，常见的渲染引擎有如下：
HTML文本到页面的第一步
HTMl到页面的第一步是DOM树，首先HTML是文本，就是字符串，但DOM树是对象，这个过程很复杂，但我们这里举个例子，这里有个表达式：
2+3-4
我么想把这个表达式解析，我们想到的是这个样子的.
我们的文本先是词法解析，将文本解析成最小的单元(token),然后通过一系列规则，语法解析，然后形成树，当然CSS，Javascript也是一样的，先词法解析，然后语法解析，然后形成树。
HTML文本到页面的第二步
首先形成了HTMl解析成DOM树，在这个同时CSS按一些规则解析成样式规则，然后DOM Tree和样式规则形成Render Tree( 渲染树),然后发生layout(重排),然后发生Painting(重绘),最终是展示在页面上.
从Render Tree 到layout相当于就是搭房子的骨架，就是把元素放在了位置上等，元素的和模型啊，元素的大小啊等，然后就是Painting,就是装修，就是元素的颜色啊等。
DOM Tree和Render Tree 的区别
Dom Tree类似于Render Tree,但区别很大，因为Render Tree能够识别样式，Render Tree的每一个节点都有自己的样式。
- 不可见元素 比如 header 里的元素，比如 display:none;等元素在DOM树存在，但在渲染树不存在
- 绝对定位的元素 比如，设置了position:absolute等的元素不会存在与渲染树中，会脱离一般的渲染流程。
Reflow 和 Repaint
Render树生成后导导致Reflow和Repaint.
当 Render Tree 中的全部或一部分因为与元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就成为重排，Reflow.
当Render Tree中的元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局，则叫 重绘,Repaint