浏览器原理—简单理解

前言：

浏览器工作原理的实质就是实现http协议的通讯，具体过程如下：(HTTP通信的流程，大体分为三个阶段)

1. 连接，服务器通过一个ServerSocket类对象对某端口进行监听，监听都之后进行连接，打开一个socket虚拟文件。
2. 请求，创建与监理socket连接相关的流对象后，浏览器获取请求，为get请求，则从请求信息中获取所访问的html文件名，向服务器发送请求。
3.  响应，服务器收到请求后，搜索相关的目录文件，若不存在，返回错误的信息。若存在，则读取html文件，进行加http头等处理响应给浏览器，浏览器解析html文件，若其中还包含图片，视频等资源，则浏览器再次访问web服务器，获取图片视频等，并对其进行组装显示给用户。

 

一.浏览器简介

浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档，也可以是 PDF、 图片或其他的类型。 资源的位置由用户使用URI（统一资源标符）指定。多年以来，各浏览器都没有完全遵从这些规范，同时还在开发自己独有的扩展程序，这给网络开发人员带来了严重的兼容性问题。 如今，大多数的浏览器都是或多或少地遵从规范

目前使用的主流浏览器有五个：Internet Explorer、 Firefox、 Safari、 Chrome 和 Opera。

 

 

二.浏览器主要构成

组件包括：

1. 用户界面：包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
2. 浏览器引擎：用来查询及操作渲染引擎的接口。
3. 渲染引擎：用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
4. 网络：用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
5. UI后端：用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
6. HTML，js，CSS解析器：用来解释执行HTML，JS，CSS代码。
7. 数据存储：属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。

              图一:主要浏览器组件

 

1.浏览器的用户界面有很多彼此相同的元素，其中包括：

• 用来输入 URI 的地址栏
• 前进和后退按钮
• 书签设置选项
• 用于刷新和停止加载当前文档的刷新和停止按钮
• 用于返回主页的主页按钮。

2.呈现引擎

浏览器按照引擎分类：

1. Trident引擎：Internet Explorer
2. Webkit引擎：Chrome（28版本后基于blink，blink是webkit的一个分支）和Safari
3. Gecko引擎：Firefox
4. Presto引擎：早期Opera采用，后用webkit引擎。  

我们来看一下Webkit引擎流程图：

 

1. 呈现引擎一开始会从网络层获取请求文档的内容，内容的大小一般限制在 8000 个块以内。 
2. 呈现引擎将开始解析 HTML 文档，并将各标记逐个转化成“内容树”上的 DOM 节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构：呈现树。呈现树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。 
3. 呈现树构建完毕之后，进入“布局”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。下一个阶段是绘制 - 呈现引擎会遍历呈现树，由用户界面后端层将每个节点绘制出来。

3.渲染引擎：

 

 渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。

　　下面是渲染引擎在取得内容之后的基本流程：

　　解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

 

 

 

                                      图2：渲染引擎基本流程

   

 

　　渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。

　　Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。

　　Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点

 

 

                   图3：webkit主流程

4.解析器：

HTML解析

HTML 解析器的任务是将 HTML 标记解析成解析树。有一种可以定义 HTML 的正规格式：DTD（Document Type Definition，文档类型定义），但它不是非与上下文无关的语法。

HTML 的定义采用了 DTD 格式。此格式可用于定义 SGML 族的语言。它包括所有允许使用的元素及其属性和层次结构的定义。

CSS解析

CSS 是上下文无关的语法，可以使用简介中描述的各种解析器进行解析。

WebKit CSS 解析器

WebKit 使用 Flex 和 Bison 解析器生成器，通过 CSS 语法文件自动创建解析器。正如我们之前在解析器简介中所说，Bison 会创建自下而上的移位归约解析器。Firefox 使用的是人工编写的自上而下的解析器。这两种解析器都会将 CSS 文件解析成 StyleSheet 对象，且每个对象都包含 CSS 规则。CSS 规则对象则包含选择器和声明对象，以及其他与 CSS 语法对应的对象。

 

                            图： 解析CSS

5.数据储存：

HTML5中的本地存储数据库Web Sql Database数据库是web互联网发展的一个重大标志，我们可以将一些常用的信息，不是很重要的全部存储到本地，这样可以减少服务器、带宽的传输，大大提高我们的访问效率，而且一些以前不能实现的功能，现在也都可以借助HTML5 本地存储来实现。

还有解析算法，浏览器容错机制，布局等等等