http协议及url输入后到页面显示发生了什么的问题

之前看过一些关于前端的一个问题，从输入 URL 到页面加载完成的过程中都发生了什么事情？
关于这个问题，也有很多面试的时候，面试官也会经常问，而要把这个问题说的非常详尽，不是一个人或一群人、几句话、一篇文章、一本书可以说清楚，里面牵扯的东西涉及了非常多复杂而庞大的学科知识和系统工程。
我试图尝试着总结一个想让普通人能看的明白些的版本，于是决定写写这篇文章，也算是做个总结吧。
作为一个web开发人员，可能很多东西离我们实际开发很远、但是了解整个过程对于了解互联网是很有益处的。闲话不多说了，开始！

热身：先来个web应用程序比较简单版的，看这张图：

浏览器发送http请求一个页面假设为http://www.xxx.com/index.html,那么web服务器收到请求就会在url路径找到相应的资源返回，如果请求的是纯html静态文件，直接返回html文件。如果请求的页面为index.php或xxx.asp或xxx.jsp那上面的Apache或IIS就会将资源交给php模块或.net模块进行处理，如果需要从数据库取出数据，程序处理语言还会与数据库软件，mysql或oracle等交互取出数据，最后解析成纯html文本文件返回给给客户端浏览器。浏览器再显示其内容。

这是一个比较简单版的日常网络浏览过程，忽略了很多细节，下面尽量用比较通俗的语言详细的说说这些细节，当然是相对的详细，不是绝对详细，重在了解整个过程，不是写科研文章。
大家都知道互联网通信都需要有一些基本的东西，首先你得有设备吧，比如pc电脑，还得有网络吧，比如WI-FI什么的，还要有通信介质吧，比如光纤，还要有处理这些东西的软件应用程序…..等等。这些东西组织在一起还要些个规范好大家统一，就有网络协议这东西啦。

1，首先先解决计算机之间通讯的问题

这里是简单版，方便理解，实际情况复杂了去了。

两个IP之间的通讯可以这样简单的理解：往一个公司打电话找某个人，首先要知道公司总机（充当IP地址），具体的人（相当于某个程序，每个程序又有各自不同端口号，比如服务器默认给浏览器http请求分配的是80端口），有了这两个号码就可以找到你要找的人了。这个就是经常听到的socket,套接字；即“主机+端口”，在此基础上就可以网络应用程序开发了。端口到端口是传输层TCP协议上的，主机IP是网络层IP协议上的，于是TCP/IP的经典名字就出来了。
两个人要沟通的话就是要传输的数据啦，具体谈什么下面讲。

接下来我们在浏览器中敲入www.baidu.com吧

2，请求与返回的基本流程

可能大家会看到，怎么来来回回走了两次？

其实第一次到的服务器应该是DNS服务器，原因是你之前没有访问过这个主机域名，浏览器或者系统或者路由中都没有该主机的DNS缓存，所以只能去最近的DNS服务器去获取，主机所对应的IP地址（DNS服务器可能是运营商的DNS服务器）。具体看下面这段：
导航的第一步是通过访问的域名找出其IP地址。DNS查找过程如下：

• 浏览器缓存 – 浏览器会缓存DNS记录一段时间。有趣的是，操作系统没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。

• 系统缓存 –如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）。这样便可获得系统缓存中的记录。

• 路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。 ISP DNS 缓存 –
  接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。

• 递归搜索 –你的ISP的DNS服务器从根域名服务器开始进行递归搜索，从.com顶级域名服务器到baidu的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。

(来源于老外的一篇文章，中文翻译的大家网上可以找到，这个是原文《What really happens when you navigate to a URL》)
当然如果本机已经有了主机的DNS缓存，则就会变成这样，省去了服务器获取IP地址的这一步（严格说不是省去了，而是本地找到了，没有发送DNS查询到服务器而已），图片就会是这样的

3，每个步骤相对具体的实现

（1）DNS查询，我们基于这个简单的图，假设本机存在DNS缓存，获取到了域名对应的IP地址。此步参考上面的解释。

（2）请求发出去的信息是什么？（也就是第一根上去的虚线所代表的数据）
难道就是www.baidu.com这几个字符或者对应的二进制数据什么的…..当然不是。
这里涉及到的东西很多很庞大，推荐大家先看看阮一峰老师的篇文章 ( 《互联网协议入门》),我觉得他讲的比较容易理解。
http协议是应用层的协议，他的整个数据部分是TCP主体部分的，加上TCP的标头部分作为TCP数据的整体又是IP协议数据的主体部分，如下图所示：

横过来看就像是阮一峰老师的这张图

其中应用层数据包里就是http请求或返回的数据了，http请求是我们最熟悉的啦，这里也具体讲讲它里面的数据，http请求或响应的数据也是有头信息，和主体的，分为：起始行,首部，和主体（其中主体内容不是必须的，但如果有，主体与首部之间会有一个空行，表示首部结束，主体开始）。如下图所示

查看请求或响应数据的工具，可以fiddler或者firebug或chrome里的network网络部分都可以看到，以下是用fiddler捕获的baidu.com的原始请求信息，是不带主体的

具体的里面各个字段是代表什么，还能再写一篇非常长的文章，这里给大家推荐一篇文章吧，
《HTTP协议详解》，讲的容易理解短小精悍，想更详细的了解，直接看书《http权威指南》写的看完就都明白了。
讲到这里，请求发送出去的数据是什么就搞定了，就是http请求或者响应的数据放进应用层数据包形成的数据整体，类似下面我修改一下的图

至此数据就算有了，该从计算机网卡发出去啦，

（3）请求的过程—-计算机到服务器的过程

至于这个过程也是一个庞大的网络工程，基本上归结为几个步骤：WI-FI路由——运营商路由各种转发——主干网各种传输——-进IDC机房各种处理——到达服务器；

关于网络工程这一块有兴趣的同学可以去翻阅下相关资料

推荐一篇文章，百度里的大神的《从输入 URL 到页面加载完成的过程中都发生了什么事情？》可以简单的了解下其中的过程。
讲到这里就可以大概谈谈整个网络协议啦
互联网的实现的层模型、互联网协议，以下是一些常见的网络协议

• 物理层：以太网 • 调制解调器 • 电力线通信(PLC) • SONET/SDH • G.709 • 光导纤维 • 同轴电缆 • 双绞线等

• 数据链路层：Wi-Fi(IEEE 802.11) • WiMAX(IEEE 802.16) •ATM • DTM • 令牌环 • 以太网 • FDDI • 帧中继 • GPRS • EVDO •HSPA • HDLC • PPP • L2TP • PPTP • ISDN•STP 等

• 网络层协议：IP (IPv4 • IPv6) • ICMP• ICMPv6•IGMP •IS-IS • IPsec • ARP • RARP等

• 传输层协议：TCP • UDP • TLS • DCCP • SCTP • RSVP • OSPF 等

• 应用层协议：DHCP •DNS • FTP • Gopher • HTTP• IMAP4 • IRC • NNTP • XMPP •POP3 • SIP • SMTP •SNMP • SSH •TELNET • RPC • RTCP • RTP •RTSP• SDP • SOAP • GTP • STUN • NTP• SSDP • BGP • RIP 等

层模型有很七层或五层、四层的，每一层都有对应的协议规范，

图片来源（略有修改）：阮一峰的博客—《互联网协议入门》
根据以上的讲解，看看这张图就能基本了解整个网络的结构及网络的传输了。（当然仅仅是在宏观的层面上基本了解）

（4）服务器处理的过程，
除了最上面提到的简单版的，webserver处理，交由后端语言处理，查询数据库什么的，还有一些别的，比如，流量非常大的网站，肯定都不止一台服务器，还会涉及到负载均衡：将请求合理地分配到多个服务器上。

（5）处理后的数据响应返回
这个就简单多了，应用层数据变成了http响应数据，在TCP/IP协议下，将请求过程逆过来就差不多了。最后发送到浏览器。浏览器再去解析返回的信息。
这里有一点需要提一下，http协议是无连接的协议，即发送完响应数据后连接关闭。每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接。还有一种就是Keep-Alive模式又称持久连接、连接重用，Keep-Alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive功能避免了重新建立连接。http 1.0中默认是关闭的，需要在http头加入”Connection: Keep-Alive”，才能启用Keep-Alive；http 1.1中默认启用Keep-Alive，如果加入”Connection: close “，才关闭。目前大部分浏览器都是用http1.1协议，也就是说默认都会发起Keep-Alive的连接请求了。
（6）浏览器获取到响应数据，进行解析呈现内容。

4，浏览器怎样解析的？浏览器工作原理

关于这个问题，作为前端开发的我是最想深入了解，深入讲讲的，对比完这篇文章后，我把我写的都删了，唉自己看吧…..不多说，前端必看！
老外的英文版《How browsers work》
中文版翻译（网上也有很多转载）： http://blog.sina.com.cn/s/blo...

说明：
本文参考了很多知名的文章，图片引用也多出自源文，有些是经过个人理解后的处理，所有权归原作者，并向其致敬。以下是引用的链接原文。放在一起方便大家查阅。
1，一本书《http权威指南》
2，《互联网协议入门》—阮一峰：http://www.ruanyifeng.com/blo...
3，《从输入 URL 到页面加载完成的过程中都发生了什么事情？》—- 百度nwind：
http://fex.baidu.com/blog/201...
4，《 从输入url到显示网页，后台发生了什么？》
英文版原文：http://igoro.com/archive/what...
中文博客：http://blog.chinaunix.net/uid...
5，《HTTP协议详解》http://blog.csdn.net/gueter/a...
6，《浏览器的工作原理》
英文版原文：http://taligarsiel.com/Projec...
中文博客：http://blog.sina.com.cn/s/blo...