浏览器到底都有什么？

前端人员最常接触的就是浏览器，无论我们平时写页面，F12里查看Element，还是写js功能调试的Console，或是调试接口用到的Network。但我们的浏览器还有哪些东西，由于这也是很大的内容，所以建了个专栏专门介绍，今天先说说他的构成，为以后具体的原理机制做基础。

浏览器的主要功能

浏览器主要功能是将用户输入的web资源以图形化的形式展示出来，一般资源格式是HTML格式。用户用URI（Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置。那在用户输入了URL后浏览器到底做了些什么？我们得先了解浏览器都有些什么。

浏览器的构成

1. 用户界面
2. 浏览器引擎
3. 渲染引擎
4. 网络
5. 显示后端
6. JS解释器
7. 数据持久层

用户界面（User Interface）

除了浏览器窗口显示的页面，其他用户看见的都属于用户界面，比如：地址栏、书签、首选项、用户头像（有登录功能的浏览器）、前进/后退/刷新、下载器 等等。是用户与浏览器本身发生交互的功能组件。

浏览器引擎（Browser Engine）

在用户界面和渲染引擎之间传送指令，是渲染引擎的一个接口。
用来加载指定的URI，实现前进、后退、刷新等功能。
用来查询/修改渲染引擎设置。

渲染引擎（Rendering Engine）

它是浏览器最重要的一个模块，负责指定的URI生成可视化界面，解析html,css以及图片等资源。
其实解析的过程是我们最要了解和关注的：回流，重绘，cssom，DOM树，一个进程上不同线程执行的先后顺序等。这些我会陆续的写，也请大家关注期待。
渲染引擎也被称为浏览器内核，市面上常见有五种内核：

1. Trident 常见浏览器：IE，360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit）猎豹浏览器.
2. Gecko 常见浏览器：火狐浏览器
3. Presto 常见浏览器：Opera浏览器早期使用，目前由于兼容等问题被废弃。
4. Webkit 常见浏览器：谷歌浏览器，Safari，手机浏览器。
5. Blink 常见浏览器：谷歌，Opera，是谷歌和Opera共同开发的。

网络（Networking）

实现http/https，FTP等文件传输协议。可以在不同字符集之间转换。也可以缓存最近检索的资源。这里引出一个话题：
1.浏览器缓存机制，最主要的就是http缓存，其中的强缓存，协商缓存分别都是什么，怎么执行。
2.http/https区别，get，post等请求

显示后端（Display Backend）

绘制用户界面控件集合，组合框（下拉框，列表框），字体合集等。例如input中不同type的样式，底层使用操作系统的用户接口。

JS解释器

用来解释，执行JavaScript代码。在ES6之前，渲染引擎和JS解释器是在一起工作的。我们最常提到的就是Webkit，就是WebCore排版引擎及JavaScriptCore解析引擎构成，但Chrome对脚本解析是用的自己研发的V8引擎。
又引出一些话题：
1.渲染引擎和Js解释器的协同工作，事件循环。
2.Js解释器中的垃圾回收机制。
3.V8中解释器，解析器，优化编译器是怎么运行的。执行Js时,解析器解析的AST，字节码，词法解析，语法解析等等。

数据持久层（Data Persistence）

浏览器在硬盘中保存的数据:
1.书签、工具栏设置等这样的高级数据。
2.Cookie，安全证书、缓存等低级数据。
我们更应该关注他们的缓存：Local Storage，Session Storage，indexedDB，Web SQL。这些都是HTML5规范中定义的。日后我会拿出一章来对他们进行描述对比。

用户输入了URL后浏览器到底做了些什么？

这也是很经典的一道面试题。回答也可粗可细。这里粗略的说，因为细说能拆出很多文章。
1.DNS域名解析；
2.建立TCP连接；
3.发送HTTP请求；
4.服务器处理请求；
5.返回响应结果；
6.关闭TCP连接；
7.浏览器解析HTML并布局渲染；

DNS域名解析

DNS解析试将语义化的域名，变为服务器的ip地址。
1.先查找浏览器中的DNS缓存，是否有域名对应的ip。
2.没有向操作系统查找。
3.系统没有对应ip，就采用递归或者迭代查询的方式,依次向根域名服务器、顶级域名服务器、权威域名服务器发起查询请求，直至找到一个或一组 IP 地址，返回给浏览器。

建立TCP连接

找到对应ip后，需要与服务器通过三次握手，建立TCP连接。
回头可以聊聊有关TCP三次握手，四次挥手，UDP无连接的协议，之间的特点及区别。

发送HTTP请求

浏览器开始发送 HTTP 请求，一个请求报文由请求行、请求头、空行、实体（Get 请求没有）组成。

服务器处理请求

浏览器请求报文到达服务器之后，服务器接口会对请求报文进行处理，执行接口对应的代码，处理完成后响应客户端。

返回响应结果

浏览器处理返回结果。当客户端发送的报文头accept（客户端期望得到的数据类型，这是浏览器自动封装的请求头），如果服务器返回的content-type是accept中的任何一个，浏览器都能解析，并直接展示在网页上。

关闭TCP连接

1. 服务器向客户端发送 Alert 报文，类型为 Close Notify，通知客户端不再发送数据，即将关闭连接，同样，这条报文也是经过加密处理的。
2. 服务器通过调用 close 函数主动关闭连接，向客户端发送带有 FIN 标志位的分组，序列号为 m。
3. 客户端确认收到该分组，向服务器发送带有 ACK 标志位的分组，确认号为 m+1。
4. 客户端发送完所有数据后，向服务器发送带有 FIN 标志位的分组，序列号为 n。
5. 服务器确认收到该分组，向客户端发送带有 ACK 标志位的分组，序列号为 n+1。客户端收到确认分组后，立即进入 CLOSED 状态；同时，服务器等待 2 个 MSL(Maximum Segment Lifetime，最大报文生存时间) 的时间后，进入 CLOSED 状态。

浏览器解析HTML并布局渲染

浏览器通过解析HTML，生成DOM树，解析CSS，生成CSS规则树，然后通过DOM树和CSS规则树生成渲染树。这里就涉及到渲染引擎的工作了，我们专门拿一篇文章去描述它。\

至此，对浏览器的大概介绍就完成了，同时也引发出很多问题：

1.浏览器缓存机制。

2.http/https协议的差别。

3.GET/POST及其他请求的差别

4.浏览器垃圾回收机制。

5.渲染引擎，Js解释器如何工作。

6.Event Loop。

7.V8脚本引擎的工作原理。

8.浏览器那些存储机制。

前端是多么有趣，一个浏览器就够我们去这么深入的探索。请大家关注我，我会把这些文章补齐。

如果此文章对您有帮助或启发，那便是我的荣幸