页面渲染

浏览器渲染机制

• 字节 → 字符 → 令牌 → 节点 → 对象模型
• 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点
• 将CSS解析成 CSS Rule Tree
• 根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了
• 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置
• 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

主流浏览器渲染流程

webkit

Geoko(firefox)