当我们在浏览器的地址栏中输入URL后，按下【Enter】键，Web页面随即被打开。在这一个过程中发生了什么？事实上，这一问题属于一道非常经典的面试题，它考察的范围非常广，每个知识点又可以细挖得非常深。网上已有大量的相关文章。我在此一方面是用我自己所掌握的知识，所能理解的方式来解答这个问题，另一方面也是对读了《图解HTTP》相关内容的总结。
初步的概念
首先，对于这个问题要先有一个初步的概念。即该问题可以理解为，①输入URL后，②浏览器向服务器发起了一个请求，传输了一些数据。③服务器接收到请求后，④作出了相应的处理，然后返回数据到浏览器。⑤浏览器再做相应的处理，最后将页面展现在我们面前。这五个部分，是这篇文章的思路，非常全面，我也就顺着他的思路来写了。
1. 浏览器如何接收到输入URL的信号
首先，当我们在键盘上敲击某个键时，键盘内的处理器会先对键矩阵进行分析，然后将数据发送到计算机。有很多方式可以完成这一过程，比如USB键盘会通过USB缆线发送数据，无线键盘可以通过蓝牙发送数据。笔记本电脑通过内部的接口发送数据。
无论何种方式，来自键盘的信号都会由计算机的键盘控制器（一种集成电路）进行处理，然后发送给操作系统。操作系统会分析，这些数据是否为系统命令，若不是，则将数据传给应用程序。
应用程序会分析这些数据是否为命令，如果不是命令，则会将数据作为内容接受。比如于在浏览器的地址栏中输入URL。若不接受这些数据，则将其忽略。
到此，我们敲击键盘，输入URL，按下【Enter】，浏览器接收到URL，并且接收到用户按下了回车键，这一部分也就结束了。
2. 浏览器如何向网卡发送数据
在我们输入URL的过程中，浏览器可能会进行一些预处理。比如用户根据输入的字符判断想要输入的网站。当按下回车键后，浏览器会对URL进行检查，是否合法，如果不合法会将输入内容传给默认的搜索引擎。
到此，浏览器开始正式解析URL了。在此之前，我们要先明白，什么是URL？
URL简介
URL（统一资源定位符 英文：Uniform / Universal Resource Locator），也就是我们所理解的网址。它有五个基本元素：
- 传送协议
- 服务器（通常为域名，由时为IP地址）
- 端口号（比如“:80”）
- 路径
- 查询
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查询。其查询过程分几个步骤：
- 查询浏览器缓存。不同的浏览器存储DNS记录的时间是不同的，一般在30秒到2分钟（要查看 Chrome 当中的缓存， 打开 chrome://net-internals/#dns）。
- 查询系统缓存。若浏览器缓存中没找到，浏览器则会做系统调用（windows里是gethostbyname）进行查询。它会查询本地Host文件，Host的位置因系统而异。
- 若Host文件也没有，则向DNS服务器发出查询请求，DNS服务器一般为路由器或 ISP 的缓存 DNS 服务器。
- 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（不编码）。
浏览器的主要构成
- 用户界面（User Interface）
- 浏览器引擎（Browser engine）
- 渲染引擎（Rendering engine）
- 网络（Networking）
- UI后端（UI Backend）
- JS解释器（JavaScript Interpreter）
- 数据储存（Data Persistence）
Paste_Image.png
—— How Browsers Work
浏览器的渲染引擎从网络层获得文档后，文档会被分成8kb的分块传输，在取得内容后，开始进行解析。
Paste_Image.png
—— How Browsers Work
解析HTML以构建DOM树==>构建Render树==>布局Render树==>绘制Render树
渲染引擎一边解析HTML，一边将标签用来构建DOM树。当他解析到CSS文件或