渲染引擎介绍目前常用的浏览器：Firefox。.Rendering主流程概念解释DOMTree：浏览器将HTML解析成树状的数据结构。CSSRuleTree：浏览器将CSS解析成一个树状的数据结构。RenderTree：DOM和CSSOM（CSSObjectModel：CSS对象模型）生成RenderTree.layout：有了RenderTree，浏览器已经可以知道网页中有哪些节点，每个节点的CSS定义以及它们的从属关系，所以至于计算每个节点在屏幕上的位置.painting：根据计算出的规则，通过显卡在屏幕上绘制内容。回流（reflow）：当浏览器发现某个部分发生了变化，影响了布局，需要返回去重新渲染，这个过程叫做回退。这个过程叫做reflow.reflow，会递归地从根frame开始并依次计算所有节点的几何尺寸和位置。Feflow几乎是不可避免的。例如：树状目录的折叠和展开，元素本质上的显示和隐藏等，都会引起浏览器回流，鼠标悬停，点击，只要这些动作引起页面一定的变化改变部分元素的占用区域、定位方式、边距等属性，会导致其内部、周边乃至整个页面的重新渲染。repaint（重绘）：当改变一个元素的背景颜色、文字颜色、边框颜色等不影响其周围或内部布局属性时，需要重绘屏幕的一部分，但元素的几何尺寸没有改变。注意：1.display:none节点不会加入到RenderTree中，而visibility:hidden会，所以如果一开始没有显示的节点，最好设置display:none2.display:none会触发reflow,而visibility:hidden只会触发重绘，因为位置没有改变。3.有些情况下，比如修改了元素的样式，浏览器不会立即回流重绘一次，而是会批量累积这样的操作，然后做一次回流，也叫异步回流或增量异步回流，但在某些情况下，比如调整窗口大小、更改页面默认字体等，对于这些操作，浏览器会立即回流主流程。渲染引擎首先通过网络获取请求文档的内容，通常以8K的块来完成。基本流程是：解析HTML构建DOM树->解析CSS构建CSSOM->合并DOM树与CSSOM树，构建Render树->布局渲染树->绘制渲染树看webkit的流程：接下来是Gecko过程：在Gecko中，格式化的可视化元素被称为“Frametree”，每个元素都是一个frame，webkit使用了renderingtree这个术语，renderingtree是由渲染对象组成的，在webkitlayout中用来表示元素的布局，而Gecko被称为回流焊。Webkit使用附件链接DOM节点和视觉信息来构建渲染树。一个小的非语义差异是Gecko在HTML和DOM树之间有一个额外的层，称为“内容接收器”，它是一个用于创建DOM对象的工厂。虽然Webkit和Gecko使用的术语略有不同，但是过程基本相同，如下：1.浏览器将HTML解析成DOM树。DOM树的构建过程是一个深度遍历的过程。只有当前节点的所有子节点都构造完成后，才会构造当前节点的下一个兄弟节点。.2.将CSS解析为CSS规则树。3.根据DOM和CSSOM构建RenderTree。Rendertree不等于DOMTree，因为像Header或者display:none这样的东西是不需要放到渲染树里面的。4.有了RenderTree，浏览器就已经可以知道网页中有哪些节点，每个节点的CSS定义以及它们的从属关系，接下来的步骤叫做layout，顾名思义就是计算每个节点的位置屏幕上。5.下一步是绘制，即遍历渲染树，使用UI后端层绘制每个节点。注：以上过程是一步步完成的。为了更好的用户体验，渲染引擎会尽早将内容渲染到屏幕上，不会等到所有的html都解析完才构建和布局渲染树。.它在解析部分内容后显示部分内容，并且仍然可以通过网络下载其余内容。本文参考此链接
