浏览器渲染原理

[CarisL]

浏览器渲染原理

浏览器的高层结构

浏览器的主要组件

1. 用户的界面

2. 浏览器引擎：在用户界面和和呈现引擎之间传送指令

3. 呈现引擎：负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。

4. 网络：用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。

5. 用户界面后端：用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。

6. JavaScript 解释器：用于解析和执行 JavaScript 代码。

7. 数据存储：这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

一些浏览器每个标签页都分别对应一个呈现引擎实例，都是一个独立的进程。比如，某个网页崩溃了，而并不会影响其他标签页

浏览器渲染的主要流程(呈现引擎)

浏览器会解析HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。 CSS，解析CSS会产生CSS规则树。 Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

总结出来的基本过程 �

1. HTML解析出DOM Tree（在构建DOM Tree的过程 ，浏览器还会构建“呈现树”。由可视化元素按照其显示顺序而组成的树，也是文档的可视化表示。它的作用是让您按照正确的顺序绘制内容。）

2. CSS解析出Style Rules

3. 将二者关联生成Render Tree

4. Layout 根据Render Tree计算每个节点的信息

5. Painting 根据计算好的信息绘制整个页面