浏览器渲染原理及web前端分析

浏览器渲染原理及web前端分析

浏览器的主要功能

1. 用户界面：包括地址栏、后退/前进按钮、书签目录等，也就是除了用来显示你所请求页面的主窗口之外的其他部分。

2. 浏览器引擎：用来查询及操作渲染引擎的接口。另外还用来操作浏览器的数据存储。

3. 渲染引擎：用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。

4. 网络：用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。

5. UI后端：用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。

6. JS解释器：用来解释执行JS代码。

7. 数据存储：属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据

图：浏览器主要组件图

浏览器渲染机制

我们现在要在浏览器中显示以上结构的HTML：

1.客户端浏览器开始从用户向服务器发出请求，服务器响应的将如上的HTML返回给请求的客户端浏览器中。

2.加载从标签开始，并发现标签内有个外部样式文件要加载