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