发布于 2017-03-23 20:33:49 | 45 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的精品教程,程序狗速度看过来!


之前看过一些关于前端的一个问题,从输入 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...



相关阅读 :
http协议及url输入后到页面显示发生了什么的问题
一道腾讯的面试题及答案
腾讯WEB前端开发工程师,三面经历及面试题
百度一面面经及面试题-研发类
BAT及各大互联网公司2014前端常见笔试面试题整理
中科创达2015校园招聘笔试题及附加题答案 -Java开发类
阿里巴巴2015校招面试回忆录(成功拿到offer)
领英、脸书面试及onsite总结(北美)
2012百度实习生招聘三面面经及面试题
BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
小米2015校招面经及笔试题
百度2015校招研发工程师面试题及面经
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务