页面渲染过程

页面的渲染过程

简洁易懂，告诉你页面渲染过程

这里做了一个脑图
其渲染步骤如下：

1. 浏览器通过 HTML parser 根据深度遍历的原则，把 HTML 解析成 DOM tree;
2. 将 CSS 解析为 CSS Rule tree (CSSDOM tree);
3. 根据 DOM树和 CSS树来构造 render tree;
4. layout: 根据得到的 render tree 来计算节点位于屏幕的位置；
5. paint: 遍历 render树，并调用硬件图形 API 来绘制每一个节点.

这里提及一下浏览器内核的理解：

1. 浏览器内核主要分为 “渲染引擎” 和 “js引擎”；
   “渲染引擎”： Rendering Engine 或 layout engineer。

2. 渲染引擎负责取得页面的内容（HTML,XML，图像等），
   并负责整理讯息（例如加入 CSS等），
   计算页面的显示方式，
   输出至显示器，打印机。

3. js 引擎负责解释和执行 js 来实现网页的动态效果。
   ps: 最初，渲染引擎 和 js引擎 并没有被明确区分，随着 js 引擎愈趋独立
   内核就倾向于只指渲染引擎。

不同浏览器有着不同的内核，所以对于网页渲染时有着大小不同的差异。当然，所有网页浏览器，电子邮件，客户端，以及其他需要编辑，显示网络内容的应用程序都离不开 “内核”。