在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
之前看过一些关于前端的一个问题，从输入 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域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。
(来源于老外的一篇文章，中文翻译的大家网上可以找到，这个是原文《》)当然如果本机已经有了主机的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请求或者响应的数据放进应用层数据包形成的数据整体，类似下面我修改一下的图
至此数据就算有了，该从计算机网卡发出去啦，
（3）请求的过程—-计算机到服务器的过程
至于这个过程也是一个庞大的网络工程，基本上归结为几个步骤：WI-FI路由——运营商路由各种转发——主干网各种传输——-进IDC机房各种处理——到达服务器；
关于网络工程这一块有兴趣的同学可以去翻阅下相关资料
推荐一篇文章，百度里的大神的《从输入 URL 到页面加载完成的过程中都发生了什么事情？》可以简单的了解下其中的过程。讲到这里就可以大概谈谈整个网络协议啦互联网的实现的层模型、互联网协议，以下是一些常见的网络协议
物理层：以太网 o 调制解调器 o 电力线通信(PLC) o SONET/SDH o G.709 o 光导纤维 o 同轴电缆 o 双绞线等
数据链路层：Wi-Fi(IEEE 802.11) o WiMAX(IEEE 802.16) oATM o DTM o 令牌环 o 以太网 o FDDI o 帧中继 o GPRS o EVDO oHSPA o HDLC o PPP o L2TP o PPTP o ISDNoSTP 等
网络层协议：IP (IPv4 o IPv6) o ICMPo ICMPv6oIGMP oIS-IS o IPsec o ARP o RARP等
传输层协议：TCP o UDP o TLS o DCCP o SCTP o RSVP o OSPF 等
应用层协议：DHCP oDNS o FTP o Gopher o HTTPo IMAP4 o IRC o NNTP o XMPP oPOP3 o SIP o SMTP oSNMP o SSH oTELNET o RPC o RTCP o RTP oRTSPo SDP o SOAP o GTP o STUN o NTPo SSDP o BGP o 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》中文版翻译（网上也有很多转载）：
说明：本文参考了很多知名的文章，图片引用也多出自源文，有些是经过个人理解后的处理，所有权归原作者，并向其致敬。以下是引用的链接原文。放在一起方便大家查阅。1，一本书《http权威指南》2，《互联网协议入门》—阮一峰：3，《从输入 URL 到页面加载完成的过程中都发生了什么事情？》—- 百度nwind：4，《 从输入url到显示网页，后台发生了什么？》英文版原文：中文博客：5，《HTTP协议详解》6，《浏览器的工作原理》英文版原文：中文博客：
0 收藏&&|&&7
你可能感兴趣的文章
3 收藏，1k
1 收藏，1.2k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。以下试题来自：
填空题WWW网页文件是用HTML语言编写的，并在____
协议支持下运行。 HTTP（或超文本传输协议，或HyperText
Transfer Protocol）
为您推荐的考试题库
你可能感兴趣的试题
1.填空题 资源2.填空题 协议3.填空题 recordset4.填空题 第三5.填空题 原子性
热门相关试卷
最新相关试卷手机浏览器支持http协议或html吗？_百度知道
手机浏览器支持http协议或html吗？
如果支持的话为什么我在手机上看到的新浪首页和电脑上的不一样呢？
我有更好的答案
一般都可以选择进入普通版的支持，手机登录会转到手机版，手机版一般做了优化，方便手机用户阅读，有两个版本。电脑登录会登录到正常版，就是比较耗流量。在手机上登录的话一般会给转到wap版。可以这样理解
采纳率：42%
可以下载欧朋opera浏览器（建议下4.5版，如果手机性能好可下最新版本），既可以看电脑上的网页，也可以看手机版网页。而且它有独特的压缩技术，能省一半左右流量！本人亲自测试，真的很好
多数手机自带浏览器 浏览时都会登陆wap站 用QQ或UC浏览器
也会自动转码
当然部分网站会有原网页的选项
为您推荐：
其他类似问题
您可能关注的内容
手机浏览器的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。WWW的网页文件一般是用什么文件编写,并在什么的协议下运行_百度知道
WWW的网页文件一般是用什么文件编写,并在什么的协议下运行
www网页文件一般用HTML语言编写的，在HTTP协议下支持运行
采纳率：60%
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。2005年12月 总版技术专家分月排行榜第三
2017年3月 C++ Builder大版内专家分月排行榜第一2015年5月 C++ Builder大版内专家分月排行榜第一2015年4月 C++ Builder大版内专家分月排行榜第一2015年3月 C++ Builder大版内专家分月排行榜第一2015年1月 C++ Builder大版内专家分月排行榜第一2014年12月 C++ Builder大版内专家分月排行榜第一2014年11月 C++ Builder大版内专家分月排行榜第一2014年10月 C++ Builder大版内专家分月排行榜第一2014年9月 C++ Builder大版内专家分月排行榜第一2014年8月 C++ Builder大版内专家分月排行榜第一2014年7月 C++ Builder大版内专家分月排行榜第一2014年6月 C++ Builder大版内专家分月排行榜第一2014年5月 C++ Builder大版内专家分月排行榜第一2014年4月 C++ Builder大版内专家分月排行榜第一2014年3月 C++ Builder大版内专家分月排行榜第一2014年2月 C++ Builder大版内专家分月排行榜第一2014年1月 C++ Builder大版内专家分月排行榜第一2013年12月 C++ Builder大版内专家分月排行榜第一2013年10月 C++ Builder大版内专家分月排行榜第一2013年9月 C++ Builder大版内专家分月排行榜第一2013年8月 C++ Builder大版内专家分月排行榜第一2013年7月 C++ Builder大版内专家分月排行榜第一2013年6月 C++ Builder大版内专家分月排行榜第一2013年5月 C++ Builder大版内专家分月排行榜第一2013年4月 C++ Builder大版内专家分月排行榜第一2013年3月 C++ Builder大版内专家分月排行榜第一2013年2月 C++ Builder大版内专家分月排行榜第一2013年1月 C++ Builder大版内专家分月排行榜第一2012年12月 C++ Builder大版内专家分月排行榜第一2012年11月 C++ Builder大版内专家分月排行榜第一2012年10月 C++ Builder大版内专家分月排行榜第一2012年9月 C++ Builder大版内专家分月排行榜第一2012年8月 C++ Builder大版内专家分月排行榜第一2012年7月 C++ Builder大版内专家分月排行榜第一2012年6月 C++ Builder大版内专家分月排行榜第一2012年5月 C++ Builder大版内专家分月排行榜第一2012年4月 C++ Builder大版内专家分月排行榜第一2012年3月 C++ Builder大版内专家分月排行榜第一2012年2月 C++ Builder大版内专家分月排行榜第一2011年11月 C++ Builder大版内专家分月排行榜第一2011年10月 C++ Builder大版内专家分月排行榜第一2011年9月 C++ Builder大版内专家分月排行榜第一2011年7月 C++ Builder大版内专家分月排行榜第一2011年6月 C++ Builder大版内专家分月排行榜第一2011年5月 C++ Builder大版内专家分月排行榜第一2011年4月 C++ Builder大版内专家分月排行榜第一2011年3月 C++ Builder大版内专家分月排行榜第一2011年2月 C++ Builder大版内专家分月排行榜第一2011年1月 C++ Builder大版内专家分月排行榜第一2010年12月 C++ Builder大版内专家分月排行榜第一2010年11月 C++ Builder大版内专家分月排行榜第一2010年9月 C++ Builder大版内专家分月排行榜第一2010年8月 C++ Builder大版内专家分月排行榜第一2010年7月 C++ Builder大版内专家分月排行榜第一2010年6月 C++ Builder大版内专家分月排行榜第一2010年2月 C++ Builder大版内专家分月排行榜第一2009年12月 C++ Builder大版内专家分月排行榜第一2009年11月 C++ Builder大版内专家分月排行榜第一2009年10月 C++ Builder大版内专家分月排行榜第一2009年9月 C++ Builder大版内专家分月排行榜第一2009年8月 C++ Builder大版内专家分月排行榜第一2009年7月 C++ Builder大版内专家分月排行榜第一2009年6月 C++ Builder大版内专家分月排行榜第一2009年5月 C++ Builder大版内专家分月排行榜第一2009年4月 C++ Builder大版内专家分月排行榜第一2009年3月 C++ Builder大版内专家分月排行榜第一2008年7月 C++ Builder大版内专家分月排行榜第一2007年4月 C++ Builder大版内专家分月排行榜第一2007年3月 C++ Builder大版内专家分月排行榜第一2006年11月 C++ Builder大版内专家分月排行榜第一2006年1月 C++ Builder大版内专家分月排行榜第一2005年12月 C++ Builder大版内专家分月排行榜第一2005年11月 C++ Builder大版内专家分月排行榜第一2005年10月 C++ Builder大版内专家分月排行榜第一2005年9月 C++ Builder大版内专家分月排行榜第一2004年3月 C++ Builder大版内专家分月排行榜第一2003年12月 C++ Builder大版内专家分月排行榜第一2003年9月 C++ Builder大版内专家分月排行榜第一
2013年5月 C++ Builder大版内专家分月排行榜第三2012年7月 C++ Builder大版内专家分月排行榜第三2012年5月 C++ Builder大版内专家分月排行榜第三2011年5月 C++ Builder大版内专家分月排行榜第三2011年3月 C++ Builder大版内专家分月排行榜第三2010年12月 C++ Builder大版内专家分月排行榜第三2010年10月 C++ Builder大版内专家分月排行榜第三2010年1月 C++ Builder大版内专家分月排行榜第三2009年9月 C++ Builder大版内专家分月排行榜第三2009年7月 C++ Builder大版内专家分月排行榜第三2009年6月 C++ Builder大版内专家分月排行榜第三2009年5月 C++ Builder大版内专家分月排行榜第三2006年3月 C++ Builder大版内专家分月排行榜第三2005年9月 C++ Builder大版内专家分月排行榜第三
2013年5月 C++ Builder大版内专家分月排行榜第三2012年7月 C++ Builder大版内专家分月排行榜第三2012年5月 C++ Builder大版内专家分月排行榜第三2011年5月 C++ Builder大版内专家分月排行榜第三2011年3月 C++ Builder大版内专家分月排行榜第三2010年12月 C++ Builder大版内专家分月排行榜第三2010年10月 C++ Builder大版内专家分月排行榜第三2010年1月 C++ Builder大版内专家分月排行榜第三2009年9月 C++ Builder大版内专家分月排行榜第三2009年7月 C++ Builder大版内专家分月排行榜第三2009年6月 C++ Builder大版内专家分月排行榜第三2009年5月 C++ Builder大版内专家分月排行榜第三2006年3月 C++ Builder大版内专家分月排行榜第三2005年9月 C++ Builder大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。