浏览器地址栏输入url到页面呈现的整个过程

当在浏览器地址栏输入网址，如：www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢？这个过程可以大致分为两个部分：网络通信和页面渲染。

1、网络通信

互联网内各网络设备间的通信都遵循TCP/IP协议，利用TCP/IP协议族进行网络通信时，会通过分层顺序与对方进行通信。分层由高到低分别为：应用层、传输层、网络层、数据链路层。发送端从应用层往下走，接收端从数据链路层网上走。如图所示：

1. 在浏览器中输入url
   用户输入url，例如http://www.baidu.com。其中http为协议，www.baidu.com为网络地址，及指出需要的资源在那台计算机上。一般网络地址可以为域名或IP地址，此处为域名。使用域名是为了方便记忆，但是为了让计算机理解这个地址还需要把它解析为IP地址。

• HTTP默认端口80
• HTTPS默认端口443

2. 应用层DNS解析域名
   客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找到则请求上级DNS服务器，直至找到或到根节点。

• 首先浏览器先检查本地hosts文件是否有这个网址映射关系，如果有就调用这个IP地址映射，完成域名解析
• 如果没找到，则会查找本地DNS解析器缓存，如果查找到则返回
• 如果还是没有找到，则会查找本地DNS服务器，如果查找到则返回
  • 迭代查询
  • 递归查询
  • dns解析过程

3. 应用层客户端发送HTTP请求
   HTTP请求包括请求报头和请求主体两个部分，其中请求报头包含了至关重要的信息，包括请求的方法（GET / POST）、目标url、遵循的协议（http / https / ftp…），返回的信息是否需要缓存，以及客户端是否发送cookie等。

4. 传输层TCP传输报文
   位于传输层的TCP协议为传输报文提供可靠的字节流服务。它为了方便传输，将大块的数据分割成以报文段为单位的数据包进行管理，并为它们编号，方便服务器接收时能准确地还原报文信息。TCP协议通过“三次握手”等方法保证传输的安全可靠。

   “三次握手”的过程是，发送端先发送一个带有SYN（synchronize）标志的数据包给接收端，在一定的延迟时间内等待接收的回复。接收端收到数据包后，传回一个带有SYN/ACK标志的数据包以示传达确认信息。接收方收到后再发送一个带有ACK标志的数据包给接收端以示握手成功。在这个过程中，如果发送端在规定延迟时间内没有收到回复则默认接收方没有收到请求，而再次发送，直到收到回复为止。

5. 网络层IP协议查询MAC地址
   IP协议的作用是把TCP分割好的各种数据包传送给接收方。而要保证确实能传到接收方还需要接收方的MAC地址，也就是物理地址。IP地址和MAC地址是一一对应的关系，一个网络设备的IP地址可以更换，但是MAC地址一般是固定不变的。ARP协议可以将IP地址解析成对应的MAC地址。当通信的双方不在同一个局域网时，需要多次中转才能到达最终的目标，在中转的过程中需要通过下一个中转站的MAC地址来搜索下一个中转目标。

   ARP协议基本原理

6. 数据到达数据链路层
   在找到对方的MAC地址后，就将数据发送到数据链路层传输。这时，客户端发送请求的阶段结束。

7. 服务器接收数据
   接收端的服务器在链路层接收到数据包，再层层向上直到应用层。这过程中包括在运输层通过TCP协议讲分段的数据包重新组成原来的HTTP请求报文。

8. 服务器响应请求
   服务接收到客户端发送的HTTP请求后，查找客户端请求的资源，并返回响应报文，响应报文中包括一个重要的信息——状态码。状态码由三位数字组成，其中比较常见的是200 OK表示请求成功。301表示永久重定向，即请求的资源已经永久转移到新的位置。在返回301状态码的同时，响应报文也会附带重定向的url，客户端接收到后将http请求的url做相应的改变再重新发送。404 not found 表示客户端请求的资源找不到。

9. 服务器返回相应文件
   请求成功后，服务器会返回相应的HTML文件。接下来就到了页面的渲染阶段了。

2、页面渲染

现代浏览器渲染页面的过程是这样的：解析HTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。

DOM树是由HTML文件中的标签排列组成，渲染树是在DOM树中加入CSS或HTML中的style样式而形成。渲染树只包含需要显示在页面中的DOM元素，像< head>元素或display属性值为none的元素都不在渲染树中。

在浏览器还没接收到完整的HTML文件时，它就开始渲染页面了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送HTTP请求重复上述的步骤。在收到CSS文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。

3、与HTTP相关的协议

参考
与HTTP相关的协议

3.1 IP协议

IP（Internet Protocol）网际协议位于网络层，几乎所有使用网络的系统都会用到 IP 协议。TCP/IP 协议族中的 IP 指的就是网际协议，"IP"和"IP地址"是不同的，"IP"其实是一种协议的名称。

IP 协议的作用是把各种数据包传送给对方，而要保证确实传送到对方那里，则需要两个重要的条件，IP 地址和 MAC地址(Media Access Control Address）

• IP 地址指明了节点被分配到的地址
• MAC 地址是指网卡所属的固定地址

IP 地址可以和 MAC 地址进行配对。IP 地址可变换，但 MAC地址基本上不会更改。

ip间的通信依赖于mac地址，在信息传输中，有时候由于中转太多，因此会采用ARP协议(解析地址的协议)，通过ip地址就可以反查出对应的mac地址。

3.2 TCP协议

TCP 位于传输层，提供可靠的字节流服务。TCP协议为了更容易传送大数据，把大块数据分割成以报文段为单位的数据包进行管理，并且能够确认数据最终是否送达到对方。

为了保证传输的可靠性，TCP协议采用了三次握手的策略。TCP协议把数据包发送出去后，会向对方确认是否成功送达，握手过程中使用了TCP的标志——SYN和ACK。

3.3 DNS服务

DNS（Domain Name System）服务是和 HTTP 协议一样位于应用层的协议。它提供域名到 IP 地址之间的解析服务。

计算机可以被赋予IP地址，也可以被赋予主机名或域名。由于主机名或域名比IP更容易记忆，用户通常使用主机名或者域名来访问对方的计算机，而不是直接使用IP地址访问（例如访问百度，使用的是www.baidu.com）。DNS 协议提供通过域名查找 IP 地址，或逆向从 IP 地址反查域名的服务，从而实现通过域名或主机名访问的效果。

3.4 HTTP与这几个协议的关系

通过这张图来了解下 IP 协议、TCP 协议和 DNS 服务在使用HTTP 协议的通信过程中各自发挥了哪些作用。