前端页面渲染机制

浏览器基础结构

　　浏览器基础结构主要包括如下7部分：

• 1.用户界面（User Interface）:用户所看到及与之交互的功能组件，如地址栏，返回，前进按钮等；

• 2.浏览器引擎（Browser engine）:负责控制和管理下一级的渲染引擎；

• 3.渲染引擎（Rendering engine）:负责解析用户请求的内容（如HTML或XML，渲染引擎会解析HTML或XML，以及相关CSS，然后返回解析后的内容）；

• 4.网络（Networking）:负责处理网络相关的事务，如HTTP请求等；

• 5.UI后端（UI backend）:负责绘制提示框等浏览器组件，其底层使用的是操作系统的用户接口；

• 6.JavaScript解释器（JavaScript interpreter）:负责解析和执行JavaScript代码；

• 7.数据存储（Data storage）:负责持久存储诸如cookie和缓存等应用数据

 

 

 

从图中可以看出，一个渲染引擎大致包括HTML解释器、CSS解释器、布局和JavaScript引擎。

HTML解释器：解释HTML语言的解释器，本质是将HTML文本解释成DOM树（文档对象模型）。

CSS解释器：解释样式表的解释器，其作用是将DOM中的各个元素对象加上样式信息，从而为计算最后结果的布局提供依据。

布局：将DOM和css样式信息结合起来，计算它们的大小位置等布局信息，形成一个能够表示这所有信息的内部表示模型即渲染树。

JavaScript引擎：JavaScript可以修改网页的内容，也能修改CSS的信息，JavaScript引擎解释JavaScript代码并把代码的逻辑和对DOM和CSS的改动信息应用到布局中去，从而改变渲染的结果。

绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成 

基本过程

1．解析HTML文件，创建DOM树

2．解析CSS,形成CSS对象模型

3．将CSS与DOM合并，构建渲染树（renderingtree）

4．布局和绘制