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

1 前言

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

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

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

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

3 一个图片也是一个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

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

尽管我们是在浏览器输入的

arduino 复制代码
http://www.aa.com/hello/index.html

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

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

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

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

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

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

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

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

7 小结

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

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

相关推荐
崔庆才丨静觅3 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60614 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了4 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅4 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅5 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅5 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment5 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅5 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊5 小时前
jwt介绍
前端
爱敲代码的小鱼5 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax