从输入 URL 到页面加载完的过程中都发生了什么事情?


推荐  (5) |
收藏 |
54人关注关注
19个答案
98 0

傅里叶变黄油猫软件工程师,应用数学专业

2014-04-30 14:13

1)把URL分割成几个部分:协议、网络地址、资源路径。其中网络地址指示该连接网络上哪一台计算机,可以是域名或者IP地址,可以包括端口号;协议是从该计算机获取资源的方式,常见的是HTTP、FTP,不同协议有不同的通讯内容格式;资源路径指示从服务器上获取哪一项资源。
例如:http://www.guokr.com/question/554991/
协议部分:http
网络地址:www.guokr.com
资源路径:/question/554991/

2)如果地址不是一个IP地址,通过DNS(域名系统)将该地址解析成IP地址。IP地址对应着网络上一台计算机,DNS服务器本身也有IP,你的网络设置包含DNS服务器的IP。
例如:www.guokr.com 不是一个IP,向DNS询问请求www.guokr.com 对应的IP,获得IP: 111.13.57.142。这个过程里,你的电脑直接询问的DNS服务器可能没有www.guokr.com 对应的IP,就会向它的上级服务器询问,上级服务器同样可能没有,就依此一层层向上找,最高可达根节点,找到或者全部找不到为止。

3)如果地址不包含端口号,根据协议的默认端口号确定一个。端口号之于计算机就像窗口号之于银行,一家银行有多个窗口,每个窗口都有个号码,不同窗口可以负责不同的服务。端口只是一个逻辑概念,和计算机硬件没有关系。
例如:www.guokr.com 不包含端口号,http协议默认端口号是80。如果你输入的url是http://www.guokr.com:8080/ ,那表示不使用默认的端口号,而使用指定的端口号8080。

4)向2和3确定的IP和端口号发起网络连接。
例如:向111.13.57.142的80端口发起连接

5)根据http协议要求,组织一个请求的数据包,里面包含大量请求信息,包括请求的资源路径、你的身份
例如:用自然语言来表达这个数据包,大概就是:请求 /question/554991/ ,我的身份是xxxxxxx。

6)服务器响应请求,将数据返回给浏览器。数据可能是根据HTML协议组织的网页,里面包含页面的布局、文字。数据也可能是图片、脚本程序等。现在你可以用浏览器的“查看源代码”功能,感受一下服务器返回的是什么东东。如果资源路径指示的资源不存在,服务器就会返回著名的404错误。

7)如果(6)返回的是一个页面,根据页面里一些外链的URL,例如图片的地址,按照(1)-(6)再次获取。

8)开始根据资源的类型,将资源组织成屏幕上显示的图像,这个过程叫渲染,网页渲染是浏览器最复杂、最核心的功能。

9)将渲染好的页面图像显示出来,并开始响应用户的操作。

以上只是最基本的步骤,实际不可能就这么简单,一些可选的步骤例如网页缓存、连接池、加载策略、加密解密、代理中转等等都没有提及。即使基本步骤本身也有很复杂的子步骤,TCP/IP、DNS、HTTP、HTML:每一个都可以展开成庞大的课题,而浏览器的基础——操作系统、编译器、硬件等更是一个比一个复杂。不是计算机专业的同学看了上面的解释完全不明白是很正常的,可能会问为什么要搞得那么复杂,但我保证这每一个步骤都经过深思熟虑和时间的考验。你输入URL即可浏览互联网,而计算机系统在背后做了无数你看不到的工作,计算机各个子领域无数工程师为此付出你难以想象的努力。

29 2

LePtC物理学博士生

2014-04-30 22:03

按 F12 打开控制台,把“网络”下的勾都选上,然后刷新一下网页,就能看到加载过程的完整日志了...

第一行是找到了果壳的服务器,之后的 .css 是加载样式表,img 是加载图片,.js 是加载 javascript 脚本,后面还有很多很多,大家自己玩吧 ...

有时候还能看到一些额外信息,比如 ...

以上用的是浏览器自带的开发者工具,另外也有专门分析网络数据包的工具,不过我忘了叫什么名字了 ...

Update:感谢网友提醒,这个软件叫 wireshark ~

17 0

0x甲鱼挨踢的甲鱼

2014-05-03 18:13

一直在等大神从量子物理层面解释一下 o(╯□╰)o 到现在大神还没粗线,本滥竽来充个数
----------------------------------------------------------------------------------------------------------
不懂量子物理,只从计算机网络角度说说自己的理解:

个人以为,图中问题主要来考察对互联网体系结构相关的基础知识,往细了说会涉及更多知识。这种问题最常出现在网络应用、尤其是Web应用开发的领域(比如大型网站开发)、或Web安全领域职位的面试中,这两个领域会对网络知识覆盖面比较广,尤其是Web安全领域;另一方面,在研发领域最近有个名词叫“全栈工程师”,大意是前端后台无所不通,就需要对网络知识掌握比较全面(架构、设计、编码都属于另外的技能咯),当然,这样的研发工程师比较难得。

依照上述领域对知识技能的要求,大概可分为三个方面:前端、后台和连接前端后台的网络数据传输。

前端
主要是围绕浏览器的工作展开,包括浏览器处理用户的交互、发送网络请求、收到网络响应之后的处理与渲染等等。

  • 第一块“处理用户的交互”,浏览器本身与用户的交互基本不涉及网络知识,但Web前端UI的设计与实现是一个前端研发攻城狮必须掌握的(主要是JS相关);
  • 第二块“发送网络请求”。最普通的就是图中问题“从地址栏输入URL开始……”,主要涉及用户端浏览器、操作系统的网络模块的相关处理。如@傅里叶变黄油猫 所说,浏览器会对URL进行检查、分析,涉及URL合法性、URL对应的协议(最常见的时HTTP协议,也是部分浏览器的默认网络协议);如果URL合法,接下来会检查URL中HOST是一个域名(Domain)还是一个IP地址;如果是IP地址,会直接发送请求,否则会查看系统本地的HOSTS文件有没有相应的配置,没有的话会启用DNS协议查询域名对应的IP地址;发送出请求,浏览器的工作暂时结束,网络请求交由操作系统处理,值得注意的是,如果是新入网机器或者局域网刚从网络故障中恢复,操作系统还可能动用ARP协议获取到出口路由的MAC地址,以便把数据包交给路由器,并有路由器转发到外网;操作系统协议栈对网络请求数据包的解析与处理是另一方面内容(主要涉及不同网络层次的不同网络协议,后面说);
  • 第三块处理网络响应与渲染。这是传统前端工程师必须掌握的知识,资源型的网络响应(比如DOC文档、ZIP压缩包文档)浏览器会智能地处理下载事宜;如果相应内容是可渲染的纯文本,就交由前端程序以合理的布局“铺”到页面中;而页面代码(HTML/CSS)的解析与现实则由浏览器的渲染引擎实现,不同浏览器渲染引擎的策略可能不同,会有一些需要注意的地方,前端工程师也会掌握这部分知识。


后台:
主要涉及Web服务器(不是大刀片那种的“硬件服务器”)对网络请求的处理。可以直观认为Web服务器就是接受并处理浏览器发送的某些协议的网络请求、并把对应处理结果返回给用户端浏览器的网络应用程序。主流Web服务器有Apache/IIS/Nginx/Tomcat(不同的Web服务器程序与不同的后台脚本程序语言或者技术配套处理网络请求,比如Tomcat主要与JSP语言配套,微软的IIS主要与ASP/ASPX技术配套结合);Web服务器通常可以接受静态请求并直接返回静态内容,但遇到动态内容的请求(目前Web应用大多数动态的),Web服务器就要把请求委托给各种语言和技术开发的“Web后台程序”,由后台程序处理动态请求,再把处理后的结果(响应内容)交给Web服务器,最后Web服务器会把响应通过互联网返回给用户端浏览器。这方面再细节的话主要就是后台程序的架构、开发、优化技术了,此处不详说。

网络数据传输:
个人认为这方面的知识才是图中问题考察的主要部分。这方面的知识从整体到细节,会涉及:

  • 互联网层次体系的划分(如理想的OSI的七层模型和实用的TCP/IP四层网络模型),每个层次里包含的主要的网络协议,路由原理等等;
  • 互联网按各种标准的划分,比如按照网络规模和地域关系划分为局域网、城域网、广域网;按照网络拓扑结构分为总线型、树状网络、网状、分布式等等,更细节的会有各种被划分的子类中一些技术,比如私有地址与公网地址转换的NAT(Network Address Translation,网络地址转换)技术;
  • 互联网不同层次里的不同协议的各种细节(数据包结构、运行策略比如TCP协议的三次握手和拥塞避免、滑动窗口、IP地址划分、DNS查询原理)甚至包括常见的协议安全类知识。

这部分内容相当繁琐复杂,但里面的各种基础知识是从事网络应用开发、网络运维、网络安全领域人员的必备知识,每逢面试,总会反复提及,面试官会以各种姿势提问,防不胜防。

果壳新手,第一次答题,啰啰嗦嗦,多有疏漏,各位轻拍。

18 4

这个题目看似简单,实际涵盖面极其广泛。感觉就像问“请叙述一下中国的历史”……

10 0

dns的过程有童鞋已经说了,,偶再补充一点,,,在计算机与dns或者目标地址通信前,如果使用的是私有地址,也就是使用了在internet上不能路由的地址,还需要通过网络设备进行地址或者地址及端口的转换,转换完把用户的地址转成公网可路由的地址及端口,然后通过这个地址和端口向目的地址和端口发送数据,,,一般的抓包工具是看不到地址转换的过程的,只能看到从dns解析到连接目标地址的过程,地址转换的过程需要在网络设备上才能看到

9 0

kiddyse材料加工硕士

2014-05-01 09:21

用firefox中的插件,httpfox可以看到post 与 get过程中的网络数据包

9 0

回车前
1. 如果用某些输循入法输入, 它会按标准结果、缓存匹配、发送到去端匹配, 给你几个联想结果。
你对结果的修改会反馈到去端。
2. 现在智能的浏览器,输入栏, 也做了第1步的事。
3. 可能有木马hook了地址栏, 或一系列调用链中的某一步,窃取你的信息,可能还会在后面转向你的网页
4. 安全软件可能hook了地址栏,或一系列调用链中的某一步, 分析你的输入, 比如发现是支付网站, 就帮你检查运行环境是否安全。
5. 统计插件也可以上报该网站增加了一次点击了。

回车后
分析域名, 如果不是ip,在本地hosts里查一把, 没查到? 查dns缓存,没查到或过期? 发dns请求(windows一般配主备dns, 不解释了吧)
dns服务器层层再向上查, 到根结点再指向具体网站的dns服务器。具体网站的dns服务器, 还可以做负载均衡, 选则合适的ip返回。 这里可以返回多ip, 但中转的dns怎么缓存, 怎么缓存时又支持不同的负载ip,没去研究。
发dns一般是udp也支持tcp, 它们都是ip网络层之上的。 dns服务器有ip地址,但两个ip地址中间可能隔了很多交换机路由器防火墙。
对于浏览器本地机器来说, 就是查路由表, 找到第一个ip(目标或中转ip)。 开始数据链路层了, 通过arp协议知道对方mac地址(这里可能被欺骗,然后就发给劫持者了,或者被斯诺登窃听了。所以要用https这类密文传输,或者关键字段自已加密,同时要做签名防篡改。整个链路的每两个点之间传输都有这个问题) 然后数据就发出去了
交换机不说了
防火墙, 按源目标ip/port协议等,匹配规则,看是否允许,生成session。新生成Session比较耗cpu, 所以长连接跨墙性能好。 还有应用层的防火墙功能, 还分析数据包, 目前类似绿坝这类,还有企业监控的,XX监控的会用。 但这个性能要求更高。
路由器, 基本功能不在连接session里的再查路由表。udp不像tcp有滑动窗口的,还有惩罚机制限速。
以上网络的部分是通用的, 不只是说dns.

查到ip后
有了ip 端口(按协议http默认80 https默认443), 进行tcp连接
从服务端说哈, 先到网关, 一般网关会做nat, 并会负载均衡到一台缓存机(CDN,或nx、squid等) , 缓存机存静态页面, 动态的有种协议可以在静态页里打个标记,只从后端取这个标记地址,或者动态页面完全不经过缓存机直接到大的web服务器。
web服务器一般会访问数据, 可能有memcache, 或读写分离的数据库,或中间件, 现在一般要分布式,要两地三中心跨城容灾, 在中国要互联互通,在海外建idc就近访问也不被墙。 要专线。。。

如果https还要各种加密签名几次握手做tcp上一层的连接

终于连接上了
send http get请求
终于收到第一个回包了(可能是zip啥格式的浏览器还要解一下)
右键看源码包, 里面还静态引用了无数的链接(脚本、图片、媒体等等)。
本地有没过期的缓存?用本地的, 不然,一个个拉回来吧。
浏览器也有规则怎么显示他们, 比如图片支持从模糊到清晰显示, 页面拉到的部分先显示等等。
页面获取cookie信息进行展现。
页面上的脚本开始跑了, 他们可以后台异步的做些事ajax啥的
脚本从cookie中获取session id get动态页面, 服务器收到session id取服务端未过期的信息。这些cooki/session和登录信息, 可以将行为关联起来, 可以做大数据的生成。 做动态页面的展现,比如精准广告。

再写就鸡叫了

4 0

不懂世的猪古生物学博士生

2014-04-30 21:50

人家都提示了,要到量子物理的层面,不能太宏观了

0 0

这个问题确实和“请讲述下中国的历史”一样,而且在发明互联网之前,还有一些传奇的故事,就像中国历史上那些传奇的战争和伟人一样,被大家所了解;从世界上第一台电脑ENIAC诞生,和原始人类诞生是不是有异曲同工之妙呢?

0 0

讲的彻底的话 一本HTTP权威指南算是详细的吧

233333333333333

0 2

有些问题就是没有答案的,就是机械的运算

2 6

从输入 URL 到页面加载完的过程中:按下回车键、等待……
(╯‵□′)╯︵┻━┻

2 6
支持者: Haizi_Ge 麦田小白

其实吧,看果壳的一半以上的人大概都不知道URL是啥,除非才去百度

0 5

自己想了一遍然后跑去一楼看专业的答案

1.回车按完后,可能会去host?看一看有没有对应的ip,如果没有,到dns服务器查找网站对应的ip
2.dns服务器返回ip
3.访问该ip,请求下载网页内容
4.浏览器显示该网页
………………
请问我面试能过吗

0 1

我是文盲 我看不懂。。。。。。。。。

查看更多

添加回答

登录 后回答问题,你也可以用以下帐号直接登录

相关问答

关于我们 加入果壳 媒体报道 帮助中心 果壳活动 免责声明 联系我们 移动版 移动应用

©2017果壳网    京ICP证100430号    京网文[2015] 0609-239号    新出发京零字东150005号     京公网安备11010502007133号

违法和不良信息举报邮箱:jubao@guokr.com    举报电话:13488674940