浏览器运行原理

(一) 浏览器的作用和主流浏览器的介绍

1.1 作用 : 浏览器通过向服务器发出请求,并接收到返回的资源.资源包含有HTML 文档，也可以是 PDF、 图片或其他的类型,

资源的位置由URL即链接地址来之指定.

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

浏览器按照引擎分类
Trident引擎：Internet Explorer
Webkit引擎：Chrome（28版本后基于blink，blink是webkit的一个分支）和Safari
Gecko引擎：Firefox

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

题外话 : 咱们中国用的什么360浏览器啊,QQ浏览器啊,都是包装一下别人的内核即引擎,我们自己是没有浏览器的,

希望不要犯这样的低级错误,就像我们是没有自己的手机操作系统的,都是在Android的基础上封装和优化的而已,

希望有一天w我们都能用上自己的东西,不向别人交专利费.

(二)浏览器引擎即组件的介绍

2.1 浏览器最重要的就是引擎了,当然还有其他的组件,主要的有

（1）用户界面 - 包括地址栏、 前进/后退按钮、 书签菜单等。 除了浏览器主窗口显示的请求的页面外，其他显示的各个部分都属于用户界面。其他显示的各个部分都属于用户界面。

（2）浏览器引擎 - 在用户界面和呈现引擎之间传送指令。

（3）渲染引擎 - 负责显示请求的内容。 如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。

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

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

（6） JavaScript 解释器 - 用于解析和执行 JavaScript 代码。

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

(三) 浏览器内核

3.1渲染引擎

      渲染引擎解析HTML文件,并将文件中的标签转化为DOM结点树,即"内容树",同时也解析css文件以及

style标签中的样式数据,这些内容被构建另一棵树----"渲染树(Render tree)"

     DOM:文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。 在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

   还有HTML解析,CSS解析,大家自己去看看吧

3.2 JS引擎

   专门处理JS脚本的虚拟机,专门设计来解释和执行JavaScript代码的.

 

(四) 浏览器处理请求的流程

1、输入url

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

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

4、获取主机ip地址过程

（1）浏览器缓存

（2）主机缓存

（3）hosts文件

（4）路由器缓存

（5）DNS缓存

（6）DNS递归查询

5、浏览器发起和服务器的TCP连接，执行三次握手（略）

6、三次握手连接后，浏览器发送一个http请求（这部分是重点，请查询相关资料，详细了解http协议关于请求格式和重要的几个请求头字段含义）。

7、服务器收到请求，转到相关的服务程序，期间可能需要连接并操作数据库（主要分get和post请求）。

8、服务器看是否需要缓存，服务器处理完请求，发出一个响应（这部分也是重点，请查询资料了解http响应头各个字段的含义）

9、服务器并根据请求头包含信息决定是否需要关闭TCP连接（如需关闭，则需要四次挥手过程）

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

11、浏览器解析收到的响应并根据响应的内容（假如是HTML文件）进行构建DOM树，构建render树，渲染render树等过程

12、处理嵌入的其他资源如css文件、js文件、图片文件、音视频等文件，处理过程类似上面的步骤在此不详述。

(五)  引用于https://blog.csdn.net/u014744118/article/details/80698602