面试官:“你说你会计网?那你说说那些网络协议?”

一 前言

在鼠鼠为了应对面试时而复习八股文时,复习到计网后会发现计网的东西又多又杂,各种各样的协议,这个和那个的区别,问了个不停。所以我们前端小萌新们初学计网内容时总是容易摸瞎碰壁。没有一个系统的概念将其串起来。所以我们通过输入URL地址后,浏览器在网络层面会发生什么(不包括浏览器渲染)这一连串的知识点,详细为大家说说各大协议以及常考的八股文,帮助大家将知识点串起来。

通过本篇文章你能够学会:

1.了解输入URL后,到底发生了什么

2.DNS协议是做什么的?什么是迭代查询?什么是递归查询

3.TCP协议与UDP协议的区别,TCP的三次握手,四次挥手具体是怎么进行

4.了解常见的计算机网络模型

二 输入URL时会发生什么?

第一部分是浏览器请求响应的过程

  • 输入URL:用户在地址栏按下回车后,先检查输入的是搜索关键字还是符合URL的规则,然后再将其组装成完整的URL进行访问。
  • 检查缓存:然后会检查本地的强缓存是否可用,如果可用就直接从缓存中获取资源
  • DNS解析:如果强缓存不可用,就会进行DNS解析,通过递归查询,迭代查询解析域名来得到其所对应的IP地址
  • 建立TCP连接:得到IP地址后,会进行三次握手去建立TCP连接
  • 发送HTTP请求:建立TCP连接后发送HTTP请求,发送HTTP请求时会携带cookie和缓存标识字段比如(ETag)
  • 服务器返回响应:服务器收到请求后,先根据请求头带来的缓存标识来判断缓存是否生效,生效就返回304状态码并使用缓存,不生效就返回新的资源和200状态码
  • 浏览器接受到HTTP响应:浏览器收到HTTP响应后根据connection:keep-alive的值来选择通过四次挥手来断开TCP连接,或者保留。
  • 同时缓存还会缓存响应头里的缓存标识字段
  • 到此为止;浏览器的请求响应的过程结束,本文针对于网络请求方面的只是细究,针对浏览器渲染问题,也在加急编写中。

我们在看到这一部分一定会觉得 "啊?这是啥啊" "啊?看不懂啊" "主播主播,有没有更简单的解释"

我们根据浏览器获得资源的顺序,进行逐一讲解,再来进行总结。

三 计算机网络模型

常见的就是OSI模型和TCP/IP模型。

这里重点说一下TCP/IP四层模型

    1. 网络接口层:(对应OSI的物理层和数据链路层)
    1. 物联网层:负责数据在不同网络之间 传输,使用IP地址,数据路由
    1. 传输层:OSI模型的第四层,在网络层之上 ,并为应用层提供服务(图中深蓝颜色的)。传输层的主要职责是提供端到端的数据传输服务 ,并保证这些服务是可靠的。传输层管理的是俩个端系统间的数据传输 ,不涉及路由。这一层的功能对于整个网络性能非常重要 ,它控制着数据传输的速度与质量
    1. 应用层:为应用程序提供网络服务的

四 DNS

在基本了解完计算机网络的模型后。我们来看看DNS的作用具体是干什么的

DNS是什么

DNS是应用层的协议,通过域名查询到具体IP地址的这么一个协议。

DNS查询IP地址流程是什么?

以谷歌浏览器为例:

当我们想要访问www.google.com时,就会进行以下操作。

  • 谷歌浏览器先查看浏览器自身是否有该域名的IP缓存

  • 谷歌浏览器在查看操作系统是否有该域名的IP缓存

  • 谷歌浏览器再看Host文件中是否有该域名的解析配置

如果host文件 中也没有找到对应的条目,浏览器就会请求本地域名服务器LDNS来解析这个域名

如果LDNS也没有域名的记录,就会进行迭代查询:

  • LDNS先去DNS根域名服务器查询,这一步查询会查询到负责com这一级域名的服务器

  • LDNS再去这个服务器查询google.com这个二级域名

  • LDNS再去查询www.google.com这个三级域名的地址

  • LDNS返回给服务器并缓存起来

关于递归查询:

在客户端寻找DNS缓存 属于递归查询

关于迭代查询

去找服务端的就是迭代查询

DNS实现负载均衡

  • 有个问题:有些大型网站里会使用很多台服务器,一个域名可能对应很多个服务器地址,这该怎么办
  • 当用户发起网站域名的DNS请求后,DNS服务器会返回这个域名所对应的服务器的IP地址的集合
  • 在每个响应中,会循环这些IP地址的顺序,用户一般会选择排在前面的地址发送请求
  • 依次将用户的请求均衡的分配到不同的服务器中,实现负载均衡

还有一种反向代理的方法,用户的请求都发送到反向代理服务器,然后有反向代理服务器来转发这些请求到真是的服务器上,依次来实现负载平衡

五 TCP与UDP

TCP和UDP是什么?

TCP和UDP属于传输层的关键协议即:TCP(传输控制协议) UDP(用户数据协议)

TCP

TCP的主要特点是提供可靠的有序的基于字节流 的传输服务。它是通过一个复杂的机制,包括序列号确认响应重传策略 等等来保证数据的完整性和可靠性。TCP还具有超时重传拥塞控制等机制

流量控制:通过控制发送者发送速度来缓解接受者的拥塞

拥塞控制:当网络出现拥塞时,TCP可以减小向网络注入数据的速率以及数量,缓解拥塞。

俩者区别:

流量控制是作用于接受者 的,它是控制发送者的发送速度从而使接受者来得及接收,防止丢失数据包

拥塞控制是作用于网络的 ,它是防止过多的数据注入网络中,避免网络负载过大

这里就面试官可能会问你拥塞控制算法,浏览控制算法之类的,那我们就看看这些算法的具体是如何进行的

流量控制机制 && 滑动窗口

  • 对于发送端以及接受端来说,TCP都要将发送的数据放入发送缓冲区,接受的数据放入接收缓冲区,
  • 而流量控制的目的,就是为了提供一个机制,让发送端可以根据接收端的实际接收能力控制发送的数据量
  • TCP通过滑动窗口实现流量控制的机制,而滑动窗口大小是通过TCP首部的窗口大小字段来通知对方
  • TCP协议的头部信息中,有一个16位字段的窗口大小,窗口大小的内容就是接收端接收数据缓存区的剩余大小,当接收缓存区面临溢出时,就会设置成一个更小的值取告诉发送端要控制发送的数据量;发送端收到后就会对数据发送量进行调整,形成完整的流量控制

拥塞控制机制

  • 慢启动:开始的时候不要发送大量数据,先测试一下网络,然后慢慢的由小变大的增加拥塞窗口大小,直到达到慢启动阈值
  • 拥塞避免:一旦判断网络出现拥塞,就会将慢启动阈值设置为出现拥塞时一半的大小,并把拥塞窗口设为1,再重新开始慢启动算法。
  • 快速重传:就是接收方在收到一个失序的报文后立即发出重复确认,快重传算法规定发送方只要连续收到三个重复确认就立即重传对方没有收到的报文段,而不用继续等重传计时器到期
  • 快速回复:当发送方连续收到三个重复确认时,就不执行慢启动算法而是执行拥塞避免算法。
  • 拥塞窗口 是指发送端还可以传输的数据量大小,上文提到有通过流量控制机制来限制发送窗口的大小,而最终会取两者之间的较小值;

在聊三次握手前,TCP还有一个特性应该会有很多小伙伴们不知道,那就是TCP是基于字节流的传输服务,那么什么是字节流呢?

基于字节流 :UDP传输是将一个完整的用户信息 发送一个UDP报文 ,而TCP是将用户消息根据滑动窗口的字节大小 ,拆分成很多个TCP报文段(TCP将数据看做一连串字节流而UDP则是堪称一个整体)

TCP三次握手

什么是握手:

在一个应用进程与另一个应用进程发送数据 前,这俩进程需要且必须需要相互握手,即它们必须相互发送某些预备报文段,以建立确保数据传输的参数

三次握手具体流程(不说人话版)

第一次握手:

客户端选择一个初始序列号 并向服务器发送一个SYN包,这个包里不包含数据 ,只是为了初始化序列号,例如,客户端发送了一个SYN包,其序列号为X

第二次握手:

服务器接收到客户端的SYN包后,发送一个SYN-ACK包 作为应答,这个包中的ACK号设为X+1 ,表示服务器已经接收到了 客户端的SYN包,同时,服务器也会选择自己的初始序列号,假设为Y,并将次序列号放在SYN包里发送给客户端

第三次握手:

客户端接受到服务器的SYN-ACK包后,会发送一个ACK包,这个包的序列号为X+1,确认号为Y+1,表示客户端已经接受到了服务器的SYN包。

通过三次握手,TCP建立完成,数据传输也可以开始了

打住,第一次看是不是被一堆没见过的专用名词给唬住了,其实里面的理解也非常简单,在面试官问你TCP三次握手时,需要将不说人话版说一遍,最后在通俗的来说三次握手,这样面试官在心里会给你加分。那么我们先看看这三次握手的意义是什么?

三次握手的意义

客户端和服务端都需要知道各自都可接受和发送,因为需要三次握手

  • 第一次握手成功让服务器知道客户端具有发送功能
  • 第二次握手让客户端知道服务器具有发送与接受功能 ,但是服务器不知道****客户端是否能接收到自己发送的信息 (如果服务端此时立刻给客户端发送数据,这个客户端可能还没有准备好接受数据
  • 第三次握手让服务器知道客户端能接收到自己的消息且已经做好了接受自己消息的准备 我们在知道每次握手的意义后,我们就要试着理解那一堆不是人的话了。
  1. 第一次握手:客户端需要让服务器知道自己具有发送功能 ,并且需要知道服务器的接受和发送功能正常 ,我们就选择发送一个Seq包,并选择一个初始化序列号X来测试服务器的接受和发送功能是否有正常
  2. 第二次握手:服务器接受到客户端的序列号 后,那么服务器为了让客户端知道自己的接受和发送能力正常 ,我们就拿客户端发送过来的X序列号 ,将其+1,并将X+1放入ACK 中,即确认号 ,让客户端确认自己的X被服务端正确接受 ,并且发送X+1确认号。这样客户端就知道服务器端的发送与接收功能正常,且服务器端知道客户端的具有正常的发送能力。但是同样的,服务器需要知道客户端是否能接收到自己的信息。所以我们服务器端也要发送SYN包,并设置序列号来测试一下客户端是否能正确接收自己的信息。设置序列号为Y
  3. 第三次握手:客户端接受到服务端发送的X+1和Y后,知道服务器能够知道自己的接受和发送功能正常 ,那么我们需要让服务器知道自己的接受能力没毛病 ,就发个确认序列号为Y+1,并发送一个ACK包序列号为X+1.

至此,三次握手完毕 。客户端和服务器端都能够同时知道对方的接收和发送功能正常,可以开始传输数据

先解释一下其中的一些字段:

1.SYN:同步序列编号,开始一个新连接

2.ACK:确认接受,回应之前的包

3.Seq:序列号,指当前数据包的序列号

4.Ack: 确认号:确认收到了数据

那么面试的时候可能会有一些附加的问题:

为什么会是三次握手,而不是两次
  • 因为这是为了防止出现失效的连接请求报文段被服务端接收到的情况,导致错误
这三次握手都能携带数据吗?
  • 第一次,第二次,都不能,因为此时还没有建立连接,会让服务器收到攻击(比如第一次握手报文发送大量数据,服务器就会消耗很多时间和空间来处理)

  • 第三次握手,此时客户端已经处于(已建立连接状态),对于客户端来说,已经建立起连接了,并且也已经知道服务器的接受能力和发送能力都是正常的,所以携带数据没问题

那么握手是用来建立TCP连接的,那么挥手就是负责断开连接

TCP四次挥手

既然已经建立了连接,那么传送完数据就得断开连接了,那么怎么断呢。这就是四次挥手的事情

  • 第一次挥手:当客户端完成数据的发送后,就会发送一个FIN包给服务器,代表客户端已经没东西可以发了,申请释放连接,假设客户端序列号为Z
  • 第二次挥手:当服务器端接受到课客户端的FIN包后,发送一个ACK包作为回应,确认号位Z+1,此时服务器接受通道关闭,但是传输通道不会关闭
  • 第三次挥手:服务器没有数据要发送,他会返回一个FIN包给客户端,请求释放服务器到客户端的连接,假设此时服务器序列号为W
  • 第四次挥手:客户端收到了服务器的FIN包后,会发送一个ACK包作为回应,确认号为W+1,并且关闭客户端的发送通道 基本的思维都是发送序列号去给对方确认的。各位读者根据握手,来看看是否能看懂四次挥手怎么挥手的呢?
那么为什么握手三次就可以建立连接了,而挥手却要四次呢?

TCP 连接是全双工的,这意味着每个方向必须单独进行关闭,最后等待一段时间后才能彻底关闭连接,以确保最后一个 ACK 的可靠性。

UDP

UDP是什么?

UDP是一个无连接的传输层协议。

TCP与UDP的区别?

  • TCP是面向连接的,UDP是无连接的,即发送数据前,不需要先建立连接

  • TCP是可靠传输,且保证了数据的正确有序,UDP是不可靠的,可能会丢包或乱序

  • TCP是面向字节流的,UDP是面向报文,并且网络出现拥塞不会使发送速率降低。

  • TCP首部开销大,最小20字节最大60字节,而UDP首部开销小,仅仅8字节

  • TCP只能是一对一,而UDP则支持1对1,1对多

六 后记:

本文基本的讲解就在此了。许多前端背八股时要通过一个知识点去发散出更多的知识点,了解各个知识点的关联,从而可以加深记忆。就比如通过输入URL,不仅能够理解URL获取资源且渲染浏览器的过程原理,也会知道才向服务器获取资源时,怎么获得?DNS TCP,那知道了TCP后,就要了解它的兄弟UDP。了解了UDP后。因为是发送的是HTTP请求,就要去了解HTTP协议,就会再去了解HTTP的发展历史,了解HTTPS是什么(下期预告)。这样子,每个知识点都层层递进,通过一个知识点扩展自己的map。这样子背八股,才能够面面俱到且能够更好的记忆理解这些知识点,在正式面试发挥出好的水准

文章更新不易,各位觉得文章帮到了自己,可以给鼠鼠点个赞吧嘿嘿(卑微鼠鼠在线求赞)

相关推荐
9ilk11 分钟前
【前端基础】--- HTML
前端·html
Lafar13 分钟前
Dart单线程怎么保证UI运行流畅
前端·面试
不和乔治玩的佩奇19 分钟前
【 设计模式】常见前端设计模式
前端
bloxed25 分钟前
vue+vite 减缓首屏加载压力和性能优化
前端·vue.js·性能优化
打野赵怀真37 分钟前
React Hooks 的优势和使用场景
前端·javascript
HaushoLin41 分钟前
ERR_PNPM_DLX_NO_BIN No binaries found in tailwindcss
前端·vue.js·css3·html5
Lafar42 分钟前
Widget 树和 Element 树和RenderObject树是一一 对应的吗
前端
小桥风满袖43 分钟前
炸裂,前端神级动效库合集
前端·css
匆叔44 分钟前
Tauri 桌面端开发
前端·vue.js