咱们之因此能够在网页上看见内容是由于每一个浏览器都含有一个渲染引擎，用来渲染窗口所展现的内容，经过一系列的步骤才将页面呈如今咱们的面前
web
渲染引擎简介浏览器
本文所讨论的浏览器——Firefox、Chrome和Safari是基于两种渲染引擎构建的，Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit服务器
渲染主流程网络
一、解析HTML生成DOM树。布局
二、解析CSS生成CSSOM规则树。spa
三、将DOM树与CSSOM规则树合并在一块儿生成渲染树。对象
四、遍历渲染树开始布局，计算每一个节点的位置大小信息。文档
五、将渲染树每一个节点绘制到屏幕。it
构建DOM树class
渲染引擎首先经过网络得到所请求文档的内容，当浏览器接收到服务器响应来的HTML文档后，会遍历文档节点，生成DOM树
构建CSSOM规则树
浏览器解析CSS文件并生成CSS规则树，每一个CSS文件都被分析成一个StyleSheet对象，每一个对象都包含CSS规则。CSS规则对象包含对应于CSS语法的选择器和声明对象以及其余对象
生成Render Tree
在DOM树和CSSOM树解析完成后，会将两者合并成一个Render Tree而后
生成布局（layout）
有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每一个节点在屏幕中的位置并将渲染树的全部节点进行平面合成
绘制页面
按照算出来的规则，经过显卡，把内容画到屏幕上
回流（reflow）：当浏览器发现某个部分发生了点变化影响了布局，须要倒回去从新渲染，内行称这个回退的过程叫 reflow重绘（repaint）：改变某个元素的背景，文字颜色等，不会影响到周围的布局，屏幕的一部分须要重绘，可是元素等几何尺寸没有变。