输入URL后发生了什么

当我们在浏览器的地址栏中输入URL后，按下【Enter】键，Web页面随即被打开。在这一个过程中发生了什么？事实上，这一问题属于一道非常经典的面试题，它考察的范围非常广，每个知识点又可以细挖得非常深。网上已有大量的相关文章。我在此一方面是用我自己所掌握的知识，所能理解的方式来解答这个问题，另一方面也是对读了《图解HTTP》相关内容的总结。

初步的概念

首先，对于这个问题要先有一个初步的概念。即该问题可以理解为，①输入URL后，②浏览器向服务器发起了一个请求，传输了一些数据。③服务器接收到请求后，④作出了相应的处理，然后返回数据到浏览器。⑤浏览器再做相应的处理，最后将页面展现在我们面前。这五个部分，是这篇文章的思路，非常全面，我也就顺着他的思路来写了。

---

1. 浏览器如何接收到输入URL的信号

首先，当我们在键盘上敲击某个键时，键盘内的处理器会先对键矩阵进行分析，然后将数据发送到计算机。有很多方式可以完成这一过程，比如USB键盘会通过USB缆线发送数据，无线键盘可以通过蓝牙发送数据。笔记本电脑通过内部的接口发送数据。

无论何种方式，来自键盘的信号都会由计算机的键盘控制器（一种集成电路）进行处理，然后发送给操作系统。操作系统会分析，这些数据是否为系统命令，若不是，则将数据传给应用程序。

应用程序会分析这些数据是否为命令，如果不是命令，则会将数据作为内容接受。比如于在浏览器的地址栏中输入URL。若不接受这些数据，则将其忽略。

到此，我们敲击键盘，输入URL，按下【Enter】，浏览器接收到URL，并且接收到用户按下了回车键，这一部分也就结束了。

---

2. 浏览器如何向网卡发送数据

在我们输入URL的过程中，浏览器可能会进行一些预处理。比如用户根据输入的字符判断想要输入的网站。当按下回车键后，浏览器会对URL进行检查，是否合法，如果不合法会将输入内容传给默认的搜索引擎。

到此，浏览器开始正式解析URL了。在此之前，我们要先明白，什么是URL？

URL简介

URL（统一资源定位符 英文：Uniform / Universal Resource Locator），也就是我们所理解的网址。它有五个基本元素：

1. 传送协议
2. 服务器（通常为域名，由时为IP地址）
3. 端口号（比如“:80”）
4. 路径
5. 查询

http，是协议；
zh.wikipedia.org，是服务器；
80，是服务器上的网络端口号；
/w/index.php，是路径；
title=Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2&printable=yes，是询问。

大多数网页浏览器不要求用户输入网页“http://”的部分，因为绝大多数网页内容是超文本传输协议文件。同样，“80”是超文本传输协议文件的常用端口号，因此一般也不必写明。一般来说用户只要键入统一资源定位符的一部分（zh.wikipedia.org/wiki/Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2）就可以了。
来源于维基百科

DNS（Domain Name System，域名系统）查询

随后，浏览器会根据URL找到相应的IP地址，也就是DNS查询。其查询过程分几个步骤：

1. 查询浏览器缓存。不同的浏览器存储DNS记录的时间是不同的，一般在30秒到2分钟（要查看 Chrome 当中的缓存， 打开 chrome://net-internals/#dns）。
2. 查询系统缓存。若浏览器缓存中没找到，浏览器则会做系统调用（windows里是gethostbyname）进行查询。它会查询本地Host文件，Host的位置因系统而异。
3. 若Host文件也没有，则向DNS服务器发出查询请求，DNS服务器一般为路由器或 ISP 的缓存 DNS 服务器。
4. ISP的缓存DNS服务器进行递归查询，从根域名服务器查到顶级域名服务器再查到权限域名服务器。最后得到目标域名的IP地址。

到此已经获得了目标域名的IP地址。接下来就是通过 Socket 发送数据

通过 Socket 发送数据

通过Socket API发送数据，可以选择TCP或UDP协议，一般来说，HTTP常用的是TCP。TCP和UDP的区别在于：

• UDP（User Data Protocol，用户数据报协议）是面向非连接的协议，它不与对方建立连接，直接将数据包发送过去。一般适用于只传送少量数据，对可靠性要求不高的情况下。
• TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议。采用了“三次握手（three-way handshaking）”策略。适用于数据量大，对可靠性要求高的情况。

三次握手

三次握手是为了确保数据准确无误的送达到目的地而采用的策略。发送端首先发送一个带SYN标志的数据包给对方，接收端收到后，回传一个带有SYN/ACK的标志的数据包以示传达确认信息。最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。若在握手中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。

 

——《图解HTTP》

浏览器再得到URL后，调用Socket，使用TCP协议，HTTP请求会被封装，加入本地端口，目标端口等信息。IP地址是在IP协议中被封装的。但光有IP地址是不够的，因为设备是可以移动的，IP地址并不与设备绑定。所以还有一个MAC要被封装，每个网卡的MAC地址都是固定且唯一的。这一系列过程就关系到了“TCP/IP协议族”的一个重要的特点：分层。

TCP/IP的分层管理

TCP/IP协议族包含了很多协议，按层次分有四层：应用层、传输层、网络层、数据链路层。

• 应用层：包含了各种通用的应用服务，比如 FTP（File Transfer Protocol，文件传输协议）、DNS、HTTP等。
• 传输层：提供网络中两台计算机之间的数据传输，比如TCP、UDP。
• 网络层：处理在网络上流动的数据包，该层规定了传输路线，数据包通过怎样的路径传送到对方的计算机中。比如 IP。
• 数据链路层：连接网络的硬件部分，包括网卡，光纤等等硬件设备

Paste_Image.png

 

——《图解HTTP》

利用TCP/IP通信时，是通过分层顺序和对方通信的。发送端从应用层往链路层，接收端从链路层往应用层。这时，我们在回过头来看发送HTTP请求的过程，又有了一个更清晰的概念，即：

• 客户端在应用层发送HTTP请求
• 在传输层（TCP协议）对HTTP请求进行封装，加入了端口号等信息
• 在网络层（IP协议）增加了IP地址
• 在链路层加入了网卡的MAC地址
  到此，一个发向对方的请求就封装好了，进入下一部分

---

3. 数据是如何从本机网卡发送到服务器的

传输的方式一般有三种

• WIFI
• 蜂窝数据网络
• 以太网
  有些情况下，调制解调器将数字信号转换成模拟信号，另一个调制解调器再讲模拟信号转换成数字信号，传送送给下一个网络节点。有些情况下，数据就一直是数字信号，被传送给下一个网络节点。无论哪种传输的方式，数据最终会到达服务器的IDC内网，通过交换机到达服务器的网卡。

---

4. 服务器如何处理数据并返回数据

事实上，在进入服务器之前，可能还会先经过负责负载均衡的机器，其目的为将请求合理地分配到多个服务器上，有很多实现方式，比如LVS，反向代理等。

在经过了负载均衡后，请求真正地到了服务器的Web Server，比如 Apache，Node.JS等。就像之前所说的，请求从链路层到应用层，此时，服务器才算真正接收到了客户端发来的HTTP请求。

HTTP请求

HTTP报文分为三个部分

• 报文首部
• 空行（CR+LF）
• 报文主体

HTTP报文分为请求报文和响应报文

Web Server首先会接收一个请求报文

对于请求报文，其结构为

Paste_Image.png

 

——《图解HTTP》

例子

Paste_Image.png

 

通常，不一定要有报文主体

——《图解HTTP》

Web Server会阅读请求和他的一些参数和cookies，然后会有相应的操作，比如更新数据，储存数据于数据库中等等。然后，Web Server会生成一个HTTP响应。
对于响应报文，其结构为

Paste_Image.png

 

——《图解HTTP》

例子

Paste_Image.png

 

——《图解HTTP》

• 请求行：包含请求的方法（GET，POST，HEAD，PUT，DELETE，CONNECT，OPTIONS, 或者 TRACE），请求URI和HTTP版本。
• 状态行：包含表明响应结果的状态码，原因短语和HTTP版本。
• 首部字段：包含表示请求和响应的各种条件和属性的各类首部
  一般有四种首部，分别是通用首部，请求首部，响应首部和实体首部。
• 其他：可能包含HTTP的RFC里未定义的首部（Cookie）。

与服务器交互的HTTP方法

有四种最基本的方法：GET，POST，PUT，DELETE，对应着“查”，“改”，“增”，“删”四个操作。

• GET和POST的区别

• GET用于获取资源，POST用于修改资源，这是本质区别

• GET请求的数据在URL里，也就是请求行中。POST请求的数据在报文主体中。

• GET请求的数据明文出现，不安全。

• GET请求的数据会受URL长度的限制（不是HTTP对其的限制，多是浏览器的限制）。POST的数据理论上不受限制，但Web Server会对提交的数据大小进行限制。

• PUT和POST的区别
  POST是作用在一个集合资源上（/uri），PUT是作用在一个具体资源上（/uri/xxx）。即若能在客户端确定uri，就用PUT，若要在服务端确定，就用POST。

• GET是安全且幂等的，安全意味着不会修改资源，幂等意味着多次输入同一URL，得到的结果都是一样的。PUT，DELETE都是幂等的。POST既不安全，也不幂等。】

状态码的类别

状态码的作用是服务器返回响应时，描述响应的结果的数字和字符串。他由3位数字和原因短语组成。例如 200 OK。数字的第一位表明了响应的类别，有五种：

	类别	原因短语
1XX	Informational（信息性状态码）	接收的请求正在处理
2XX	Success（成功状态码）	请求正常处理完毕
3XX	Redirection（重定向状态码）	需要进行附加操作以完成请求
4XX	Client Error（客户端错误状态码）	服务器无法处理请求
5XX	Server Error（服务器错误状态码）	服务器处理请求出错

---

5. 浏览器如何处理服务器的响应

HTTP在传输数据时，可以直接按照原样传，也可以进行编码。

报文和实体

• 报文：HTTP通信中的基本单位，由8位组字节流组成，通过HTTP通信传输。
• 实体：作为请求和响应的有效载荷数据被传输，内容由实体首部和实体主体组成。
• 报文主体和实体主体在一般情况下相等，但当传输中进行编码操作时，实体主体的内容发生变化，导致它和报文主体产生差异

——《图解HTTP》

内容编码是应用在实体主体的编码格式，目的是压缩实体信息，被压缩的实体信息由客户端接收并解码。常用的编码有 gzip，compress，deflate，identity（不编码）。

浏览器的主要构成

1. 用户界面（User Interface）
2. 浏览器引擎（Browser engine）
3. 渲染引擎（Rendering engine）
4. 网络（Networking）
5. UI后端（UI Backend）
6. JS解释器（JavaScript Interpreter）
7. 数据储存（Data Persistence）

 

Paste_Image.png

—— How Browsers Work

 

浏览器的渲染引擎从网络层获得文档后，文档会被分成8kb的分块传输，在取得内容后，开始进行解析。

 

Paste_Image.png

—— How Browsers Work

 

解析HTML以构建DOM树==>构建Render树==>布局Render树==>绘制Render树

渲染引擎一边解析HTML，一边将标签用来构建DOM树。当他解析到CSS文件或<style>时，它又会开始解析这些样式，随即利用这些样式和已知的html构建Render树。在构建Render树时，渲染引擎还会开始布局Render树，确定每个节点的坐标。最后由UI后端完成绘制Render树。值得注意的是，渲染引擎并不是全部解析完HTML，再构建DOM树，构建和布局Render树的，这些都是逐步完成的。他会一边在下载文档，一边在解析HTML，一边在构建DOM树，一边在构建和布局Render树。解析一部分，就显示一部分。这是为了更好的用户体验。

当解析到需要获取其他地址的标签如<img>时，浏览器又会发起一个HTTP请求，进行之前提到过的DNS查询等等一系列操作。但是对于这种静态文件，很可能在浏览器缓存中就有，不需要和服务器进行交互。

最后，会使用CPU或GPU完成渲染，页面也就这样展现在我们面前了

作者：饥人谷_汲汲
链接：https://www.jianshu.com/p/5d750867897a
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。