「面面俱到」前端须知网络知识

前言

今天整理复习一下前端必修——网络主要包括http(s)、TCP/IP四层模型、DNS、CDN这几个模块内容，后面就是附上几个常见问题。

HTTP

概念

HTTP叫做超文本传输协议，web通过该协议完成客户端到服务器端的一系列流程。HTTP是不保存状态的协议，既无状态协议，协议本身对于请求或响应之间的通信状态不进行保存，因此连接双方不能知晓对方当前的身份和状态。

TCP/IP 协议族

http是他的的一个子集在了解之前我们要知道基础的五层模型(如果不算实体层的话也可以说是4层)，小编之前总结过一篇相关的五层模型，这边还是简单的搬运过来一下，我写的与我们实际操作层面是反的从下层到上层。

• 实体层

  把电脑链接起来的物理手段，规定网络的电器特性负责传送0、1信号。

• 链路层

  用来处理连接网络的硬件部分，通过以太网协议将一组电信号构成一个数据包，数据包两个部分

  • 标头
    包含一些数据说明项比如MAC地址(发送者、接受者网卡编号)、数据类型。
  • 数据
    就是所要传输的数据

  这些数据包的传播方式为广播：丢出数据包然后同样子网络的计算机就会收到然后由他们自身去判断是否为接受方，非接收方就丢弃该数据包，到这里我们就可以通过这几种方式来是实现相同子网下计算机之间进行通讯。

• 网络层

  网络层规定了数据通过怎样的传输路线到达对方计算机传送给对方，就是通过我们的IP地址做一个判定，如果是在同一子网下的数据包那么我们就使用广播的方式传送，不是的话就用路由方式传递非同一子网的数据包。通常情况下我们的IP地址是已知的(我们所输入网址会通过DNS协议会将我们所输入的网址请求转换为IP地址)。

• 传输层
  传输层对接上层应用层，提供处于网络连接中两台计算机之间的数据传输所使用的协议。

  • TCP协议
    是全双工的，即发送数据和接收数据是同步进行的，就好像我们打电话一样，说话的同时也能听见。TCP协议在建立和断开连接时有三次握手和四次挥手(这里就放到后面说一下了放这太挤了)，因此在传输的过程中更稳定可靠但同时就没UDP那么高效了。
  • UDP协议
    是面向无连接的，也就是说在正式传递数据之前不需要先建立连接。UDP 协议不保证有序且不丢失的传递到对端，也就是说不够稳定，但也正因如此，UDP协议比TCP更加高效和轻便。

  那么通过网络所传递过来的数据包是干什么的怎样分别呢？这就是传输层存在的意义。我们通过端口去实现，他是每一个使用网卡的编号。传输层就实现了端口之间的通信。到这里又一次的将以太网数据包细化，端口信息通过TCP协议存放到了IP数据包之中，这就将以太网数据包细化成了如下格式。

  

• 应用层

  应用层规定了向用户提供应用服务时通信的协议，主要就说一下先前提到的DNS协议就是在这一层去解析网址成IP地址。

HTTP版本

这也是小编经常看到的一个问题这边整理一下他们每个版本的特点以及区别。每一次版本的更新都是优化过程，影响一个 HTTP 网络请求的因素主要有两个：

• 带宽

• 延迟

  • 浏览器阻塞（HOL blocking）：浏览器会因为一些原因阻塞请求。浏览器对于同一个域名，同时只能有 4 个连接（这个根据浏览器内核不同可能会有所差异），超过浏览器最大连接数限制，后续请求就会被阻塞。

  • DNS 查询（DNS Lookup）：浏览器需要知道目标服务器的 IP 才能建立连接。将域名解析为 IP 的这个系统就是 DNS。这个通常可以利用DNS缓存结果来达到减少这个时间的目的。

  • 建立连接（Initial connection）：HTTP 是基于 TCP 协议的，浏览器最快也要在第三次握手时才能捎带 HTTP 请求报文，达到真正的建立连接，但是这些连接无法复用会导致每次请求都经历三次握手和慢启动。三次握手在高延迟的场景下影响较明显，慢启动则对文件类大请求影响较大。

HTTPS与HTTP

简单通俗来说呢就是在HTTP的基础上提供了一层加密协议使得网络传输更加安全，通过SSL或TLS（可以看作SSL3.0）提供加密处理数据、验证对方身份以及数据完整性保护

HTTP1.0与1.1

最早的http只是使用在一些较为简单的网页上和网络请求上，所以比较简单，每次请求都打开一个新的TCP链接，收到响应之后立即断开连接。

而到了1.1阶段引入了更多的缓存控制策略、在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟。

HTTP2.0

这里是一个非常大的跨度，主要是实现了下面这三个点

• 多路复用
• 头部压缩
• 服务端推送

HTTP3.0

HTTP/2.0使用了多路复用，一般来说同一域名下只需要使用一个TCP连接。但当这个连接中出现了丢包的情况，那就会导致整个TCP都要开始等待重传，也就导致了后面的所有数据都被阻塞了。这种情况下3为了解决采取了。

• 避免包阻塞： 多个流的数据包在TCP连接上传输时，若一个流中的数据包传输出现问题，TCP需要等待该包重传后，才能继续传输其它流的数据包。但在基于UDP的QUIC协议中，不同的流之间的数据传输真正实现了相互独立互不干扰，某个流的数据包在出问题需要重传时，并不会对其他流的数据包传输产生影响。

• 快速重启会话： 普通基于tcp的连接，是基于两端的ip和端口和协议来建立的。在网络切换场景，例如手机端切换了无线网，使用4G网络，会改变本身的ip，这就导致tcp连接必须重新创建。而QUIC协议使用特有的UUID来标记每一次连接，在网络环境发生变化的时候，只要UUID不变，就能不需要握手，继续传输数据。

HTTP状态码

这边小编就不码字了直接上图，这里比较全一般的其实住几个常用的即可

跨域请求

分两种一种简单请求，一种复杂请求

• 简单请求
  浏览器检测到请求是 CORS 请求, 添加一个origin字段(其中包含页面源信息: 协议、域名、端口)，服务端收到后作相应的处理(对比origin, 服务端判断这个源是否接受)返回结果给浏览器，浏览器检查响应头是否允许跨域信息 ，允许, 那就当做没事发生。 不允许, 浏览器抛出相应的错误信息。
• 复杂请求
  在发生请求时, 如果是 CORS 请求，浏览器预先发送一个 option 请求。浏览器这种行为被称之为预检请求。

DNS、CDN

这边还是把这两个知识点罗列在这里，

• DNS

  DNS主要是是实现了一个域名解析的一个作用(网址 -> ip地址)

• CDN

  内容分发网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

常见前端安全问题

XSS攻击

XSS 攻击全称跨站脚本攻击，是利用html可以执行的特性，想尽办法将脚本注入页面中的攻击手段

CSRF 攻击

CSRF中文名为跨站请求伪造，CSRF攻击是源于Web的隐式身份验证机制

浏览器缓存

意思就是，浏览器缓存保存着用户通过HTTP获取的所有资源，再下一次请求时可以避免重复向服务器发出多余的请求。就类似于我们去打开一个网站，然后这个网站的图片文字资源都down到本地了，我们下次访问就可以不用再去下载，加快了资源获取。

浏览器缓存分为两类

• 强缓存

  浏览器在加载资源时，会先根据本地缓存资源的header中的信息判断是否命中强缓存，如果命中则直接使用缓存中的资源不会再向服务器发送请求。
  

• 协商缓存

  协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，协商缓存是在强缓存没有命中时之后的操作，浏览器会发送一个请求到服务器，如果未命中告诉服务器需要新的资源，然后服务器去发送到本地下载更新缓存。如果命中了协商缓存则返回304告诉浏览器使用本地缓存

Cookie, LocalStorage 与 SessionStorage

• 什么是 Cookie

  是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。

• localStorage

  localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

• 什么是SessionStorage

  Session 代表着服务器和客户端一次会话的过程。Session 对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序的 Web 页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。当客户端关闭会话，或者 Session 超时失效时会话结束。

• 两者区别

  • cookie数据存放在客户的浏览器上，session数据放在服务器上
  • cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。用户验证这种场合一般会用 session
  • session保存在服务器，客户端不知道其中的信息；反之，cookie保存在客户端，服务器能够知道其中的信息
  • session会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie
  • session中保存的是对象，cookie中保存的是字符串
  • session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到，而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的。

TCP/IP三次握手四次挥手

前面说到了，把这个点放到这边来讲，就通俗的讲一下大概的一个流程，也会说明为啥是三次四次这个次数问题，纠其内部细节大伙自行查找相关文章。

三次握手

• 第一次握手
  建立连接。客户端发送连接请求报文段，然后，客户端等待服务器的确认。这次连接就跟我遇到了朋友我跟他打招呼，他没回应的话那么久连接失败了。
• 第二次握手
  服务器端回应客户端，根据客户端连接请求报文段同时自己还要发送SYN请求信息，这就例如我朋友回应了我的招呼并问道了我几句，那么连接成功，要是他中文不好没有明白我的意思回应错误那么连接就失败了。
• 第三次握手
  客户端收到服务器的报文段，然后回应服务器。

三次握手简单来讲就是，客户端拍了一下服务器说你好，服务器转头(第一次握手)，然后服务器说"Oh，nice to meet you"，客户端能听懂英文(第二次握手)，然后做出回应"nice too meet you too"，这样三次握手就是实现了服务器与客户端的连接，就可以进行数据的传输。

四次挥手

那么数据传输完就得分开，老朋友分开当然不能头都不回就走，得有一个告别那么就是我们的四次挥手

• 第一次挥手
  服务器向客户端发送报文，报文内容说自己数据传输完毕了，要关闭这个口子了
• 第二次挥手
  客户端接收到这个报文消息然后发送同意报文关闭传输。
• 第三次挥手
  然后客户端主动跟服务器端发断开连接请求
• 第四次挥手
  服务器端收到断开请求时发送同意断开报文给客户端，客户端接收到就断开连接，然后服务器一看诶 你走了好了那我也走了。
  这就是两个很矫情的人分开A：服务器 B：客户端

A: 我话说完了我们可以分开了嘛？
B：好的
A：你先走吧你走了我再走
B：转头就走，然后A走了

这就是一个简单的四次挥手断开连接的描述。

从url到网页显示经历了什么

这是网络部分总结最核心的一个问题

• DNS解析
  这一步是解析我们所输入的网址转换为ip地址

• TCP连接
  然后就到了传输层TCP三次握手与客户端进行连接

• 发送HTTP请求

• 服务器处理请求并返回HTTP报文

• 浏览器解析渲染页面

• 连接结束
  这边就是TCP四次挥手结束连接

面面俱到系列传送门

• JS(包含es6)基础篇
• CSS篇
• 原型继承篇
• Vue篇
• 前端须知网络
• webpack篇