从输入url到页面展现(二)找服务器其实是在找IP地址

服务器 0

前言

前一节我们讲述了url的规则,url的几种类型,以及访问web服务器的时候,如果用户访问的url如果不包含index.html的话,大概会如何去寻找这个url对应的文件,如果感兴趣的同学可以回头去看上一篇:从输入url到页面展现(一)从浏览器解析url开始

下面开始本小节的知识点,浏览器解析url后,我们先对响应请求有个认识,然后知道找web服务器,其实主要是找那台具体服务器的IP地址

目录

前言

1.  通过url发送请求,返回响应

2. 一个图片也是一个http消息 

3.  找web服务器,其实是在找IP地址

4. 我要给面试官用大白话讲网络

5. 把服务器IP地址说的更详细一点 

6. 小结


1.  通过url发送请求,返回响应

例如我们上节课中说到的 http://www.aa.com/hello/index.html 这个例子,用户输入的这个url网址,一般都是以get的方式向服务端发送请求,而浏览器通过解析,也会生成http请求消息,告诉服务器,你要读取服务器下 /hello/index.html 文件的数据,存放到响应消息中,然后返回给客户端。等浏览器收到这些响应消息的时候,就会通过一定的规范,将返回数据显示在浏览器上,呈现给用户。而返回响应的过程中,会包含一个重要的响应状态码

2. 一个图片也是一个http消息 

如果你需要请求的网页是纯文本的,那么直接返回响应,浏览器渲染即可。如果页面中包含图片信息,1个或者N个,那么网页会在相应的位置嵌入图片文件标签,我们知道HTML标签中的图片标签是img,浏览器就会在响应位置进行计算,然后留出显示图片所需要的位置,空间,信息,这个时候,会再次生成http消息,向图片所在的服务器发送请求。这个步骤和我们获取网页文件的步骤是一样的,什么这个面试题可以换一个问法,就是:如果浏览器输入一个图片的url,到页面渲染图片,这个过程是怎么样的?

我们知道,发送一个http请求,生成1个http消息,一般只包含1个url,所以也就是只能获取一个图片,那么如果网页中包含5个图片呢,算上我们之前获取网页的http请求消息,一共就会生成6个http消息了。

所以,浏览器和web服务器的重要分歧之一或者说浏览器的重点工作之一,就是指挥这一系列请求进行发送,然后获取到响应信息进行图文并茂的展示,但是web服务器,说实话,他就比较懒,他不关心你需要展示几个图片,多大多小,你需要的图片是要展示在网站上,还是自己本地的页面上,你请求,我就给你,我不关心你请求几次,你请求一条我就给你一条响应。

但响应头却也有所不同,比如响应HTML文件的content-type值是text/html,而响应图片的content-type值是 image/png

 

3.  找web服务器,其实是在找IP地址

尽管我们是在浏览器输入的 http://www.aa.com/hello/index.html,但是浏览器也就是解析一下这个url链接,他其实浏览器并没有往服务器发送请求的网络能力。我们上面说了,浏览器解析了url,生成1个或者N个http请求,这就是个预备工作,谁可以往出发送请求呢?你是不是想到了网线,wifi啥的?说的笼统点,就是浏览器希望告诉操作系统,我要往出发请求啦,你可以帮我发送出去吗?

虽然我们输入的 www.aa.com 什么什么,但服务器那台机器其实就是所谓的ip,我们一般团队里的同事都说ip为什么什么的那台机器,不会说域名所属的那台机器,也只有ip能表明我们真正要找到的那台,存放着我们index.html的那台机器。所以,我们输入的这个域名,其实和服务器那台机器的ip是有一定的绑定关系的。也就是说一个域名可能指向了1台或者N台服务器。

4. 我要给面试官用大白话讲网络

我们整个互联网的那个设计思路是啥?你要想到TCP/IP,比如我们每个公司或者家里可以称作为一个小的子网,我们的公司里有好多台机器,也就是子网其实也包含了很多台机器,我们在公司可以不联网也互相访问,很多人一问他你做过什么项目,做过管理系统,你们访问不到,我们只能内部网络访问,外边访问不着。这就好比是我们的管理系统部署在公司内部的局域网,或者是公司这个小子网上。这些个内部的机器再找个集线器链接起来,我们互相访问。但想访问外面的东西,让自己公司连上往,每个公司再添加上一个路由器,互相连接起来,组成了大的互联网。

5. 把服务器IP地址说的更详细一点 

比如许文强住在霞飞路99号,这么说可能还是不够详细,比如许文强,陆如萍都住在霞飞路99号吧,然后许文强住在99号301室。这个99号就是整个子网,99号里住着很多人,也许还有明台住在302室,所以他们很多人都住在99号,那么号这个“网络号”就分配给了住在99号,而具体到某一个室呢,就是那一台具体的服务器了,室也就有了自己的主机号,具体起来“霞飞路99号301室”,这个地址就很具体了,快递一个剃须刀直接就可以发送给许文强,而这个具体的地址不就是所谓的IP地址了嘛。

通过这个具体的IP地址,我们找到了许文强,也就是找到了存放 /hello/index.html 的服务器,从而将之前生成的http消息发送到具体的服务器。不过真实的网络肯定还有先过“集线器”这一步,不过做为回答面试题,这一步可以省略掉。

说点题外话,网络中有个专用词叫“下一跳”,大概思路就是我们本地的浏览器把http消息委派给操作系统,操作系统往出发消息,然后我们处于一个子网呀,对吧,子网把消息发送给“集线器”,集线器又找到我们自己或者离我们最近的路由器,这个时候已经把ip地址告诉路由器了,路由器看到ip地址“霞飞路99号301室”,看到后发现,哦,我要去找下一个路由器了,决定把这个消息发送给下一个路由器了,“下一跳”大概意思就是我下一次要跳到那个路由器去了。如果你某一天听到网络同学说xiayitiao,万不可理解为他被吓坏了,吓了一大跳。

 

6. 小结

从浏览器输入url到页面展现,这本身就是一个很蛋疼的问题,我们做为前端开发,如果经验少一些,很容易对服务器啦,网络啦,了解的不多,但如果你不了解这些呢,回答起这道面试题必定很空洞,说白了就是你回答完了,很容易让面试官无感,觉得你回答后根本无法给你加分。

所以希望读完本专栏,可以让你对整体的http链条,其中的网络走向知识,请求回的页面优化都有个更详细的认知。我相信,读完后,你的横向知识面一定会超出前端范畴的

 

 

也许您对下面的内容还感兴趣: