浏览器渲染机制

目前，最主流的五种浏览器类型：Intenet Explorer, Firefox, Safari, Chrome and Opera

浏览器的基本部件：


The rendering engines :将浏览器请求的内容展现到浏览器的屏幕上。

> Firefox, Chrome and Safari are built upon two rendering engines. Firefox uses Gecko - a "home made" Mozilla rendering engine. Both Safari and Chrome use Webkit.

---

（基本）浏览器渲染的流程：

1. 浏览器会先解析html文档，根据DOM节点构建“content tree”；

2. 浏览器解析css文本，获取样式，将样式和HTML中的dom节点对应，构建render tree;render tree由可视化元素节点和对应的样式组成，同时也确定了元素在页面上展现的顺序；

3. 构建好render tree 树后，浏览器会根据渲染树进行布局，计算好每个节点的位置和大小；

4. 最后就是把元素节点根据前面的处理结果绘制在浏览器的屏幕上；

---

Webkit main flow(Chorme Safari ):

Mozilla's Gecko rendering engine main flow(Fiefox):

---

webkit渲染过程和gecko渲染流程的不同点：

webkit渲染构造了render tree，但是gecko渲染构建的是frame tree ;webkit 是的layout过程，在gecko上叫做reflow 过程；webkit是把构建的DOM树和CSSOM树attachment一起构建render tree ,而对于gecko在html文档和DOM树之间有一层content sink来获取DOM节点；