从浏览器输入url到页面加载（五）请求数据在网线中的故事

亦凉 2023-10-12 12:03 5阅读 0赞

#### 前言 ####

上一章我们说到了，为了确保连接通道已建立完成，进行**三次握手**的确认。但无论是请求页面，还是发送一个ajax请求，数据都是要达到服务器的，包括header头，body信息这些。一旦离开了客户端浏览器，再离开了客户端操作系统，就要开始漫长的网线旅程了。

![63748e72dc314943857316f3b1f6a386.gif_pic_center][]

**目录**

前言

1. 按地址发送

2. 电信号在传输过程中的衰减

3. 电磁波影响正常传输数据的电信号

4. 最后

--------------------

#### 1. 按地址发送 ####

我们之前说过，数据要穿过离得最近的集线器，下一跳，下一跳的跳过路由器，慢慢的达到服务器目的地，而这中间环节决定往哪里的路由器跳，完全是由ip地址或者说数据包头部信息决定的。就像邮递员，他只看信封的邮编，地址，不用看信件里面的内容，就知道往哪里送。

> 这里说个题外话，配送地址讲究三级地址，**四级地址**，例如省份，城市，县，乡镇（或者是街道）这是四级地址。但据我分析，未来肯定不止这四级了，你想啊，出海业务，不得加个国家啊，以后月球，火星，地球开始配送了，那不得加个星球啊，对吧。

![fdec9d634aff43f191bbfbf2a00933f4.png][]

#### 2. 电信号在传输过程中的衰减 ####

我们知道，发送的web请求，都要通过网线走这个旅行的过程，而网线里面那8根小细线，传导的是电信号，或者是电流，怎么流？从客户端的网卡往网线流。什么流，电流，刺啦刺啦的那种。网卡中有设备将数据包转为电信号，而以太网信号的本质就是正负变化的电压了呗。

有电压，就会想到初中学的电阻，网线越细，网线越长，电阻就会越大，那么无疑，电信号在网络中传输的时候，越走越没劲，会有**信号衰减**的情况。

> 记得也是初中的时候，有个同学去看他姐姐的孩子（也就是同学的外甥）。自己本来零花钱就不多，买了两瓶歪歪，准备给外甥。但走着走着，感觉挺累，喝了一瓶。

而一旦中间电信号衰减， 如果本来就已经衰减的信号再进一步**失真**，就会出现对0和1的误判，这就是产生**通信错误**的原因。

![024f7568b1444f0ebada69f20aef5afc.png][]

#### 3. 电磁波影响正常传输数据的电信号 ####

![c1526d6481a94f04b532412f4ceeb2cb.png][]

双绞线就是两根小细线拧麻花，你要是不知道麻花是啥，那可能不太好理解。双绞线的作用是为了抑制噪声。电流声听过没？我之前买了一个thinkpadE几几，那家伙插上电滋滋的响，当然，这只是一种形象的比喻。网线嘛，通电后周围总是会有**电磁波**的，电磁波如果周围有金属，那么就产生电流了。

> 我们说网线里本来就是电流，然后新的噪声（电磁波）又产生了新的电流，都是电信号，都是电流，虽然一个是从大本营出发的正规军，一个是半路换上衣服混进来的，但混合起来，就分不太清了，会互相影响。

我们说双绞线就是麻花形状的，要是还有点疑惑，剪开网线看看那8根小细线，里面有麻花，咸的。把电信号线做成螺旋麻花形状，那么电信号也是螺旋形状的，然后噪声电信号在通过电磁场过来后的电信号方向就会相反，从而使得噪声电流相互抵消，噪声就得到了抑制。

一根网线里8根小细线，对吧，他们都自带电流，但是你想啊，一根网线才多粗，里面还有8根，这8兄弟离得这么近，能不相互干扰嘛。这就需要在双绞线的缠绕上做手脚，双绞线是螺旋形状的，所以就做成缠绕间隔的差异性，让他们有的**正信号**离得近，有的地方**负信号**离得近，同性互斥嘛，对吧。

再或者是给整根网线外层加**保护膜**，给双绞线加保护膜，这都是工艺手段。所以你就看，创新无处不在，你在工作中多用心，一个月硬写一个专利肯定没问题啊。

> 说到这里，如果哪天面试，你觉得面试官在难为你，你就问他，网线里有几根小细线？他如果说8根，你就说不对。他如果敢说4根，你就说，不对。他如果还敢问这根前端有什么关系，你就跟他说，废话，从浏览器输入url到页面展现，你的数据不得过网线啊，你说有没有关系。他要是敢生气，你就掀他们公司的桌子，最好是那种圆桌，玻璃的，手一碰还来回晃那种（**哈哈，开玩笑的，别真的去掀桌子**）。

#### 4. 最后 ####

其实做为前端开发，我们每天都会涉及到请求网页，请求数据，而且现在大家都用笔记本，用wifi，也不插网线了，但在整个数据传输过程中，一直到服务器，中间还是会有路由器，有网线环节的。

我们平时更多的是组装一下JSON数据，和服务端联调，拿到RES数据进行渲染，做一些动画效果。那么了解这一章节的知识有没有用呢？反正我是觉得挺有用的，至少大晚上的看见了麻花。

[63748e72dc314943857316f3b1f6a386.gif_pic_center]: https://img-blog.csdnimg.cn/63748e72dc314943857316f3b1f6a386.gif#pic_center
[fdec9d634aff43f191bbfbf2a00933f4.png]: https://img-blog.csdnimg.cn/fdec9d634aff43f191bbfbf2a00933f4.png
[024f7568b1444f0ebada69f20aef5afc.png]: https://img-blog.csdnimg.cn/024f7568b1444f0ebada69f20aef5afc.png
[c1526d6481a94f04b532412f4ceeb2cb.png]: https://img-blog.csdnimg.cn/c1526d6481a94f04b532412f4ceeb2cb.png