网页通过浏览器展示在我们面前，说网页的渲染机制就是说浏览器怎么渲染页面的。市面上浏览器主流浏览器chrome，firefox，ie，safari，opera，虽然品牌各不相同，但它们思路的渲染流程大致相同，只不过在有些细节方面有差异。
浏览器渲染的流程
xuanransilu.png
- 浏览器会先解析html文档，根据DOM节点构建“content tree”；
- 浏览器解析css文本，获取样式，将样式和HTML中的dom节点对应，构建render tree;render tree由可视化元素节点和对应的样式组成，同时也确定了元素在页面上展现的顺序；
- 构建好render tree 树后，浏览器会根据渲染树进行布局，计算好每个节点的位置和大小；
- 最后就是把元素节点根据前面的处理结果绘制在浏览器的屏幕上；
具体步骤
有了大致的流程之后，接下来就是怎么实现了。
chrome等
chromexuanran.png
- 解析 HTML 标签, 构建 DOM 树
- 解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
- 把每个节点绘制到屏幕上 (painting)
firefox
firefoxxuanran.jpg
- 解析 HTML 标签到Content Sink
- 这时，先加载Content Sink里面的内容，页面上会显示一个无样式的内容
- 循环加载css样式，每次加载一部分css样式后，都会重现渲染页面
