浏览器的运行原理

1、什么是浏览器

要想了解浏览器的运行原理，首先必需要先了解什么是浏览器。

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

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展现您选择的网络资源。这里所说的资源通常是指 HTML 文档，也能够是 PDF、 图片或其余的类型。资源的位置由用户使用URI（统一资源标符）指定。

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

1. 浏览器按照引擎分类
Trident引擎：Internet Explorer

Webkit引擎：Chrome（28版本后基于blink，blink是webkit的一个分支）和Safar

Gecko引擎：Firefox

Presto引擎：早期Opera采用，后用webkit引擎

下面是各大浏览器的用户占有率

2、浏览器的主要构成

浏览器的主要组件包括：

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

浏览器组成部分如图所示：

3、浏览器内核工做原理简介

浏览器包含不少个模块，有网络、资源管理、网页浏览、页面管理、插件、帐户、开发者工具等等。其中，网页浏览功能模块是浏览器的核心，它主要完成从HTML文档到可视化的图像转换工做，这是浏览器内核的主要功能。

一般浏览器内核也被称为渲染引擎，它的输入是网络和存储模块得到的HTML文档（包括CSS，JavaScript），渲染引擎的输出就是这些HTML元素描述的图像和JS描述的控制动做。

 

 

渲染引擎主要分为HTML解释器、CSS解释器、布局以及JavaScript引擎。大致的流程以下：网页内容通过HTML解释器后，构建一颗DOM树，而且将文档中包含的JavaScript脚本交由JS引擎处理，将CSS样式表交由CSS解释器处理；最终DOM树接收CSS解释器解析的样式信息来构建中间模型——绘图模型。该模型再通过布局模块计算内部各元素的位置和大小信息，最后由绘图模块完成从该模型到图像的绘制。

 

 

 4、前端处理流程简介

一、输入url

二、查看浏览器缓存，看是否有缓存，若是有缓存，继续查看缓存是否过时，若是没有过时，直接返回缓存页面，若是没有缓存或者缓存过时，发送一个请求。

三、浏览器解析url地址，获取协议、主机名、端口号和路径。

四、获取主机ip地址过程

（1）浏览器缓存

（2）主机缓存

（3）hosts文件

（4）路由器缓存

（5）DNS缓存

（6）DNS递归查询

五、浏览器发起和服务器的TCP链接，执行三次握手

六、三次握手链接后，浏览器发送一个http请求

七、服务器收到请求，转到相关的服务程序，期间可能须要链接并操做数据库

八、服务器看是否须要缓存，服务器处理完请求，发出一个响应

九、服务器并根据请求头包含信息决定是否须要关闭TCP链接

十、浏览器对接收到的响应进行解码

十一、浏览器解析收到的响应并根据响应的内容进行构建DOM树，构建render树，渲染render树等过程

十二、处理嵌入的其余资源如css文件、js文件、图片文件、音视频等文件。