Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

网络模型基础 #3

Open
WeiShengv99 opened this issue Nov 20, 2021 · 0 comments
Open

网络模型基础 #3

WeiShengv99 opened this issue Nov 20, 2021 · 0 comments

Comments

@WeiShengv99
Copy link
Owner

为什么了解网络

身为一名前端工程师,也许你会认为我们并不需要对网络有所了解,但是我们却经常接触网络这一块的技术,来看看我们经常接触的网络的具体应用。

  • http协议
  • socket
  • 页面缓存
  • http长链接
  • 请求跨域
  • 文件的上传和下载
  • 直播的推流和拉流

从上面众多技术的应用可以看到,网络对于前端来说是不可或缺的部分,如果我们不了解网络相关的知识,当我们遇到某些问题的时候,可能就会完全找不到解决方案。

网络的基础模型

本篇文章并不会太深入的去讲解网络的底层知识(毕竟我这个菜鸡也不太了解😢)

  1. 物理层 (纯物理的传输)
  2. 链路层(帧的形式传输)
  3. 网络层 (通过IP对2个节点之间连接)
  4. 传输层(建立主机间的联系 TCP / UDP / TLS / SSl)
  5. 会话层(建立和管理会话)
  6. 表示层(数据的编码和转换)
  7. 应用层(http,https)

上面是网络相关文章都会提到的网络七成模型,我们可以看到http是基于tcp协议的,经过ssl加密包装之后就是https协议。

但是TCP的连接建立是有一个具体的过程的,它和UDP的建立并不一样,我们经常听到的三次握手,四次挥手,这个经典的问题就是TCP连接的建立方案,只有TCP成功的建立,我们才能在TCP的基础上去包装成HTTP,所以HTTP是在应用层面的协议。那么让我们来具体看看TCP的建立。

image-20190814170848612

上面就是三次握手的图示,下面则是四次挥手

image-20190814170904104

经过三次握手,我们才能确认2个节点之间建立了一个稳定的连接,我们大致了解下TCP连接的建立,之所以是三次才能建立一个稳定的连接是因为只有这样才能以最少的次数建立稳定的连接,让我们来继续了解HTTP吧

HTTP

我们现在都知道前端与服务器的交互大多数是依赖HTTP了,那么究竟怎么才能创建一个HTTP连接呢,在浏览器中,浏览器为我们提供了一个叫做XHR的构造函数,通过这个函数,我们就可以去创建一个HTTP请求,当然,我们在实际运用的过程中并不会直接去使用XHR,而是用一些封装出来的开源库,来方便的进行请求。

我们在开发过程中,经常回去调试面板观察后端返回的数据是否正确,在这个面板上我们可以查看详细的HTTP报文,可以一般都是回去观察这些内容

  • Request Header

  • Response Header

  • params

    这些通常是我们用来检查自己创建的http链接是否正确的途径,通过它我们一般就可以确定出BUG出现在哪里,那么我们就应该去了解这一部分的知识,

Header和params

每一个Http请求都会有一个头部信息,用来描述请求的信息,服务端一般也会去检查请求的头部信息,有时会根据不同的头部信息去返回不同的数据,

每个Http的返回同样会带上一些头部信息,不过这些头部信息一般不需要我们进行处理和读取,浏览器会自动去处理这些头部信息,比如存储cookie和缓存页面和跨域控制等,这些通常不是我们来进行控制的,当然,你也需要去了解这些头部信息代表的意思,了解这些可以帮助我们去定位问题。

params一般就是我们发到服务器的数据。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant