浏览器运行原理简介

1.什么是浏览器

浏览器通俗的讲：

           就是平时我们观看一些网页，或者查询一些东西所用的软件就是浏览器。

而官方的解释为：

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

2.浏览器的主要功能

通俗理解为：浏览网页，查询事物，几乎所有你想了解的都能在浏览器中找到。

官方解释为：向服务器发出请求，然后浏览器在他的的窗口中展示你选择的网络资源。这种资源一般为HTML文档（我理解为是一个网页），同时也有PDF，图片或者其他的类型资源。而这个资源的位置是用户通过URI（Uniform Resource Identifier统一资源标符）来给浏览器指定的。

          如今各浏览器都没有完全遵从这些规范，同时还在开发自己独有的扩展程序，这给网络开发人员带来了严重的兼容性问题。

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

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

          Trident（又称为MSHTML），中文是三叉戟的意思。是微软的视窗作业系统（Windows）搭载的网页浏览器—Internet Explorer的排版引擎的名称。它被设计成一个软体元件（模组），使得其他软体开发人员很容易的将网页浏览的功能加到他们自行开发的应用程式里。（详情链接https://baike.so.com/doc/3951966-4147130.html）

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

           WebKit 所包含的 WebCore排版引擎和 JSCore 引擎，均是从KDE的KHTML及KJS引擎衍生而来。它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。它的优势在于高效稳定，兼容性好，且源码结构清晰，易于维护。（详情链接https://baike.so.com/doc/5701786-5914501.html）

 

Gecko引擎：Firefox

            Gecko是套开放原始码的、以C++编写的网页排版引擎。目前为Mozilla家族网页浏览器以及Netscape 6以后版本 浏览器所使用。这软件原本是由网景通讯公司开发的，现在则由Mozilla基金会维护。它提供了一个丰富的程序界面以供因特网相关的应用程序使用。（详情链接https://baike.so.com/doc/1857274-1964243.html）

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

            Presto 是一个由 Opera Software 开发的浏览器排版引擎，供 Opera 7.0-12.17版本使用。Presto 取代了旧版 Opera 4至6版本使用的 Elektra 排版引擎，包括加入动态功能，例如网页或其部分可随着 DOM 及 Script 语法的事件而重新排版。（详情链接https://baike.so.com/doc/2010152-2127235.html）

3.浏览器的主要组件

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

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

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

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

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

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

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

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

 

                     

4.浏览器内核工作原理简介

   4.1渲染引擎

               渲染引擎它的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件，可以显示PDF格式。

               浏览器内核分成两部分：渲染引擎和js引擎，由于js引擎越来越独立，内核就倾向于只指渲染引擎，所以渲染引擎也称为浏览器内核。渲染引擎一开始会从网络层获取请求文档的内容，通常以8K分块的方式完成。 获取了文档内容之后，渲染引擎开始正式工作。

              首先浏览器解析HTML文档和解析CSS样式表形成DOM树和CSSDOM树 ，然后结合DOM树和CSSDOM树形成 render树。 也就是我们所说的渲染树。然后 浏览器在render树内对每个render节点进行布局处理，计算出每一个元素的大小和位置。确定其在屏幕上的位置 ，最后进行绘制。通过遍历render树将实际的像素显示到屏幕上。
其基本流程如图所示：

         解析HTML用以构建DOM树——》构建渲染树——》布局渲染树——》绘制渲染树

                     

 

以上的步骤是一个渐进的步骤，但是为了提高用户体验，浏览器并不会等待所有html文档加载完成之后才建立渲染树并渲染。 他会在从网络层获取html文档的同时把已经接收到的局部内容先渲染出来。

DOM:  文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。 在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。 
渲染引擎解析：  解析一个文档即将其转换为具有一定意义的结构——编码可以理解和使用的东西。 解析的结果通常是表达文档结构的节点树，称为解析树或语法树。

   4.2浏览器的渲染顺序问题

1.浏览器加载和渲染html的顺序

1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。

2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）

3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。

4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。阻塞加载

5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。

6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数

2. JS的加载

2.1 不能并行下载和解析（阻塞下载）

2.2 当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现。

5.前端处理流程简介

（摘抄）

1、输入url

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

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

4、获取主机ip地址过程

（1）浏览器缓存

（2）主机缓存

（3）hosts文件

（4）路由器缓存

（5）DNS缓存

（6）DNS递归查询

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

        5.1 TCP/IP 协议

                TCP/IP 是基于 TCP 和 IP 这两个最初的协议之上的不同的通信协议的大的集合。

                 TCP 用于从应用程序到网络的数据传输控制。

                 TCP 负责在数据传送之前将它们分割为 IP 包，然后在它们到达的时候将它们重组。

                 IP 负责计算机之间的通信。

                 IP 负责在因特网上发送和接收数据包。

                          （详情链接：https://baike.so.com/doc/2883582-3043043.html）

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

               HTTP 负责 web 服务器与 web 浏览器之间的通信。

               HTTP 用于从 web 客户端(浏览器)向 web 服务器发送请求，并从 web 服务器向 web 客户端返回内容(网页)。

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

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

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

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

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

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