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

た入场券 2023-09-26 20:38 119阅读 0赞

#### 前言 ####

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

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

![63748e72dc314943857316f3b1f6a386.gif_pic_center][]

**目录**

前言

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 文件的数据，存放到响应消息中，然后返回给客户端。等浏览器收到这些响应消息的时候，就会通过一定的规范，将返回数据显示在浏览器上，呈现给用户。而返回响应的过程中，会包含一个重要的**响应状态码**

![6ae792f13aed49098fe066b436db9c25.png][]

#### 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

![28f6e2e1ab7a46589d7fcebca42ea753.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，比如我们每个公司或者家里可以称作为一个小的子网，我们的公司里有好多台机器，也就是子网其实也包含了很多台机器，我们在公司可以不联网也互相访问，很多人一问他你做过什么项目，做过管理系统，你们访问不到，我们只能内部网络访问，外边访问不着。这就好比是我们的管理系统部署在公司内部的局域网，或者是公司这个小子网上。这些个内部的机器再找个集线器链接起来，我们互相访问。但想访问外面的东西，让自己公司连上往，每个公司再添加上一个路由器，互相连接起来，组成了大的互联网。

![6ef66b8bd7c94c98b6f269adec830d3e.png][]

#### 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链条，其中的网络走向知识，请求回的页面优化都有个更详细的认知。我相信，读完后，**你的横向知识面一定会超出前端范畴的**。

[url_url]: https://blog.csdn.net/xingyu_qie/article/details/130142440
[63748e72dc314943857316f3b1f6a386.gif_pic_center]: https://img-blog.csdnimg.cn/63748e72dc314943857316f3b1f6a386.gif#pic_center
[6ae792f13aed49098fe066b436db9c25.png]: https://img-blog.csdnimg.cn/6ae792f13aed49098fe066b436db9c25.png
[28f6e2e1ab7a46589d7fcebca42ea753.png]: https://img-blog.csdnimg.cn/28f6e2e1ab7a46589d7fcebca42ea753.png
[6ef66b8bd7c94c98b6f269adec830d3e.png]: https://img-blog.csdnimg.cn/6ef66b8bd7c94c98b6f269adec830d3e.png