【前端词典】进阶必备的网络基础（上）

前言

在不那么遥远的一些年之前，一个在江湖中行走的前端，只须要了解“前端三剑客”就足以找到一份工做。不少前端只限于 CSS，HTML、JS，网络基础，数据结构之类的都不甚了解。不过这个时期的前端也是最受鄙视的时期，这个时期前端的大量工做依赖于后端，且不须要动画效果和交互效果。

现现在前端圈已经发生翻天覆地的变化，Vue，React，ES6，HTML5，CSS3，Webpack, PostCss 等技术层出不穷。做为一个有格局的前端，对网络基础定是要了然于心的。

若是你对网络基础还不太了解，如下的内容能够给你提供一个思路；若是你对此已经了然于心，如下的内容烦请批评指正。

入题

任何事物的诞生，最初都是服务于极少数人的。渐渐地被这极少数人推而广之，咱们大众就开始接触了解它，互联网是如此，麻将亦是如此。无论是互联网仍是麻将，它们都加强了人与人之间的交流。 接下来我会讲如下内容：

1. 五层因特网协议栈
2. HTTP 与 HTTPS 的区别
3. TCP/IP 协议
4. 三次握手和四次挥手
5. DNS 域名解析
6. 五类 IP 地址
7. 跨域的缘由及处理方式
8. 正向代理和反向代理
9. CDN 带来的性能优化
10. HTTP 强缓存&协商缓存

这一篇我会讲 1 ~ 5, 6 ~ 10 我会在下一篇讲。

五层因特网协议栈 TOP

五层因特网协议栈这个知识点对你来讲或许有点枯燥，不过当你对这个协议栈有了一个初步的了解以后，你以前的某些疑问就会很明朗。

1、应用层

应用层( application-layer ）的任务是经过应用进程间的交互来完成特定网络应用。应用层协议定义的是应用进程（进程：主机中正在运行的程序）间的通讯和交互的规则。对于不一样的网络应用须要不一样的应用层协议。在互联网中应用层协议不少，如域名系统 DNS，支持万维网应用的 HTTP 协议，支持电子邮件的 SMTP 协议等等。

咱们把应用层交互的数据单元称为报文

域名系统

域名系统( Domain Name System )是因特网的一项核心服务，它做为能够将域名和 IP 地址相互映射的一个分布式数据库，可以令人更方便的访问互联网，而不用去记住可以被机器直接读取的 IP 数串。

http 协议

超文本传输协议（ HyperText Transfer Protocol ）是互联网上应用最为普遍的一种网络协议。全部的 WWW（万维网） 文件都必须遵照这个标准。

2、传输层

传输层(transport layer)的主要任务就是负责向两台主机进程之间的通讯提供通用的数据传输服务。应用进程利用该服务传送应用层报文。

传输层经常使用的两种协议

1. 传输控制协议-TCP：提供面向链接的，可靠的数据传输服务。
2. 用户数据协议-UDP：提供无链接的，尽最大努力的数据传输服务（不保证数据传输的可靠性）。

TCP（Transmisson Control Protocol）

1. TCP 是面向链接的（须要先创建链接）；
2. 每一条 TCP 链接只能有两个端点，每一条 TCP 链接只能是一对一；
3. TCP提供可靠交付的服务。经过TCP链接传送的数据，无差错、不丢失、不重复、而且按序到达；
4. TCP 提供全双工通讯。TCP 容许通讯双方的应用进程在任什么时候候都能发送数据。TCP 链接的两端都设有发送缓存和接收缓存，用来临时存放双方通讯的数据；
5. 面向字节流。TCP 中的“流”（Stream）指的是流入进程或从进程流出的字节序列。

UDP（User Datagram Protocol）

1. UDP 是无链接的；
2. UDP 是尽最大努力交付，即不保证可靠交付，所以主机不须要维持复杂的连接状态；
3. UDP 是面向报文的；
4. UDP 没有拥塞控制，所以网络出现拥塞不会使源主机的发送速率下降（对实时应用颇有用，如直播，实时视频会议等）；
5. UDP 支持一对1、一对多、多对一和多对多的交互通讯；
6. UDP 的首部开销小，只有 8 个字节，比 TCP 的 20 个字节的首部要短。

1. 单工数据传输只支持数据在一个方向上传输
2. 半双工数据传输容许数据在两个方向上传输，可是，在某一时刻，只容许数据在一个方向上传输，它其实是一种切换方向的单工通讯；
3. 全双工数据通讯容许数据同时在两个方向上传输，所以，全双工通讯是两个单工通讯方式的结合，它要求发送设备和接收设备都有独立的接收和发送能力。

3、网络层

网络层的任务就是选择合适的网间路由和交换结点，确保计算机通讯的数据及时传送。在发送数据时，网络层把运输层产生的报文段或用户数据报封装成分组和包进行传送。在 TCP/IP 体系结构中，因为网络层使用 IP 协议，所以分组也叫 IP 数据报 ，简称数据报。

互联网是由大量的异构（heterogeneous）网络经过路由器（router）相互链接起来的。互联网使用的网络层协议是无链接的网际协议（Intert Prococol）和许多路由选择协议，所以互联网的网络层也叫作网际层或 IP 层。

4、数据链路层

数据链路层(data link layer)一般简称为链路层。两台主机之间的数据传输，老是在一段一段的链路上传送的，这就须要使用专门的链路层的协议。
在两个相邻节点之间传送数据时，数据链路层将网络层接下来的 IP 数据报组装成帧，在两个相邻节点间的链路上传送帧。每一帧包括数据和必要的控制信息（如同步信息，地址信息，差错控制等）。

在接收数据时，控制信息使接收端可以知道一个帧从哪一个比特开始和到哪一个比特结束。

5、物理层

在物理层上所传送的数据单位是比特。 物理层(physical layer)的做用是实现相邻计算机节点之间比特流的透明传送，尽量屏蔽掉具体传输介质和物理设备的差别。使其上面的数据链路层没必要考虑网络的具体传输介质是什么。“透明传送比特流”表示经实际电路传送后的比特流没有发生变化，对传送的比特流来讲，这个电路好像是看不见的。 在互联网使用的各类协议中最重要和最著名的就是 TCP/IP 两个协议。

同 OSI 七层协议模型、TCP/IP 四层模型的区别

1. OSI 七层模型
   OSI七层协议模型主要是：
   应用层（Application）、表示层（Presentation）、会话层（Session）、传输层（Transport）、网络层（Network）、数据链路层（Data Link）、物理层（Physical）。

2. TCP/IP四层模型
   TCP/IP是一个四层的体系结构，主要包括：
   应用层、传输层、网络层和链路层。

各层对应

如下一张图很好的说明了这三种协议的区别

HTTP 与 HTTPS 的区别 TOP

区别	HTTP	HTTPS
协议	运行在 TCP 之上，明文传输，客户端与服务器端都没法验证对方的身份	身披 SSL( Secure Socket Layer )外壳的 HTTP，运行于 SSL 上，SSL 运行于 TCP 之上， 是添加了加密和认证机制的 HTTP。
端口	80	443
资源消耗	较少	因为加解密处理，会消耗更多的 CPU 和内存资源
开销	无需证书	须要证书，而证书通常须要向认证机构购买
加密机制	无	共享密钥加密和公开密钥加密并用的混合加密机制
安全性	弱	因为加密机制，安全性强

对称加密与非对称加密

对称密钥加密是指加密和解密使用同一个密钥的方式，这种方式存在的最大问题就是密钥发送问题，即如何安全地将密钥发给对方；
而非对称加密是指使用一对非对称密钥，即公钥和私钥，公钥能够随意发布，但私钥只有本身知道。发送密文的一方使用对方的公钥进行加密处理，对方接收到加密信息后，使用本身的私钥进行解密。
因为非对称加密的方式不须要发送用来解密的私钥，因此能够保证安全性；可是和对称加密比起来，很是的慢.

综上：咱们仍是用对称加密来传送消息，但对称加密所使用的密钥咱们能够经过非对称加密的方式发送出去。

HTTP2

HTTP2 能够提升了网页的性能。

在 HTTP1 中浏览器限制了同一个域名下的请求数量（Chrome 下通常是六个），当在请求不少资源的时候，因为队头阻塞当浏览器达到最大请求数量时，剩余的资源需等待当前的六个请求完成后才能发起请求。

HTTP2 中引入了多路复用的技术，这个技术能够只经过一个 TCP 链接就能够传输全部的请求数据。多路复用能够绕过浏览器限制同一个域名下的请求数量的问题，进而提升了网页的性能。

TCP/IP 协议 TOP

负责传输的 IP 协议

按层次分，IP（Internet Protocol）网际协议位于网络层，IP 协议的做用是把各类数据包传送给对方。而要保证确实传送到对方那里，则须要知足各种条件，其中两个重要的条件是 IP 地址和 MAC 地址（Media Access Control Address）。

IP 地址和 MAC 地址： 指明了节点被分配到的地址，MAC 地址是指网卡所属的固定地址，IP 地址能够和 MAC 地址进行配对。IP 地址可变换，但 MAC 地址基本上不会更改。

使用 ARP 协议凭借 MAC 地址进行通讯

1. IP 间的通讯依赖 MAC 地址。
2. ARP 是一种用以解释地址的协议，根据通讯方的 IP 地址就能够反查出对应方的 MAC 地址。

TCP 协议如何保持传输的可靠性

TCP提供一种面向链接的、可靠的字节流服务。
1. 面向链接
意味着两个使用 TCP 的应用（一般是一个客户和一个服务器）在彼此交换数据以前必须先创建一个 TCP 链接。在一个 TCP 链接中，仅有两方进行彼此通讯；
2. 字节流服务
意味着两个应用程序经过 TCP 链接交换 8bit 字节构成的字节流，TCP 不在字节流中插入记录标识符。

TCP 之因此可靠，大致上因为如下缘由：

1. 数据包校验：目的是检测数据在传输过程当中的任何变化，若校验出包有错，则丢弃报文段而且不给出响应，这时 TCP 发送数据端超时后会重发数据；
2. 对失序数据包重排序：既然 TCP 报文段做为 IP 数据报来传输，而 IP 数据报的到达可能会失序，所以 TCP 报文段的到达也可能会失序。TCP 将对失序数据进行从新排序，而后才交给应用层；
3. 丢弃重复数据：对于重复数据，可以丢弃重复数据；
4. 应答机制：当 TCP 收到发自 TCP 链接另外一端的数据，它将发送一个确认。这个确认不是当即发送，一般将推迟几分之一秒；
5. 超时重发：当 TCP 发出一个段后，它启动一个定时器，等待目的端确认收到这个报文段。若是不能及时收到一个确认，将重发这个报文段；
6. 流量控制：TCP 链接的每一方都有固定大小的缓冲空间。TCP 的接收端只容许另外一端发送接收端缓冲区所能接纳的数据，这能够防止较快主机导致较慢主机的缓冲区溢出，这就是流量控制。

TCP/IP 通讯传输流

借用图解 HTTP 一书中的图文：

发送端在层与层之间传输数据时，每通过一层一定会加上一个该层的首部信息。反之，接收端在层与层之间传输数据时，每通过一层会把相关的首部信息去掉。

TCP 三次握手和四次挥手 TOP

TCP（Transmission Control Protocol 传输控制协议）是一种面向链接的、可靠的、基于字节流的传输层通讯协议，由 IETF 的 RFC793 定义。

三次握手

第一次握手：
创建链接时，向服务器发出链接请求报文，这是报文首部中的同部位 SYN = 1，同时选择一个初始序列号 seq = x ，客户端进程进入了 SYN-SENT （同步已发送状态）状态,等待服务器确认；
第二次握手：
服务器收到 syn 包后，若是赞成链接，则发出确认报文; 确认报文 ACK = 1，SYN = 1，确认号是 ack = x + 1，同时也要为本身初始化一个序列号 seq = y，此时服务器进程进入了 SYN-RCVD（同步收到）状态；
第三次握手：
客户端收到服务器的 SYN+ACK 包，要向服务器给出确认。确认报文的 ACK = 1，ack = y + 1，本身的序列号 seq = x + 1，此时，TCP 链接创建，客户端进入 ESTABLISHED （已创建链接）状态。

完成三次握手，客户端与服务器开始传送数据。

注：
seq:"sequance" 序列号；
ack:"acknowledge" 确认号；
SYN:"synchronize" 请求同步标志；
ACK:"acknowledge" 确认标志；
FIN:"Finally" 结束标志。

未链接队列
在三次握手协议中，服务器维护一个未链接队列，该队列为每一个客户端的SYN包（syn=j）开设一个条目，该条目代表服务器已收到SYN包，并向客户端发出确认，正在等待客户端的确认包。这些条目所标识的链接在服务器处于 SYN_RECV状态，当服务器收到客户端的确认包时，删除该条目，服务器进入ESTABLISHED状态。

创建一个链接须要三次握手，而终止一个链接要通过四次挥手，这是由 TCP 的半关闭（half-close）形成的。

四次挥手

第一次挥手：
客户端进程发出链接释放报文，而且中止发送数据。释放数据报文首部 FIN=1，其序列号为 seq = u（等于前面已经传送过来的数据的最后一个字节的序号加1），此时，客户端进入 FIN-WAIT-1（终止等待1）状态。

第二次挥手：
服务器收到链接释放报文，发出确认报文，ACK = 1，ack = u + 1，而且带上本身的序列号 seq = v，此时，服务端就进入了 CLOSE-WAIT（关闭等待）状态。

TCP 服务器通知高层的应用进程，客户端向服务器的方向就释放了，这时候处于半关闭状态，即客户端已经没有数据要发送了，可是服务器若发送数据，客户端依然要接受。这个状态还要持续一段时间，也就是整个 CLOSE-WAIT 状态持续的时间。
客户端收到服务器的确认请求后，此时，客户端就进入 FIN-WAIT-2（终止等待2）状态，等待服务器发送链接释放报文（在这以前还须要接受服务器发送的最后的数据）。

第三次挥手：
服务器将最后的数据发送完毕后，就向客户端发送链接释放报文，FIN = 1，ack = u + 1，因为在半关闭状态，服务器极可能又发送了一些数据，假定此时的序列号为 seq = w，此时，服务器就进入了 LAST-ACK（最后确认）状态，等待客户端的确认。

第四次挥手：
客户端收到服务器的链接释放报文后，必须发出确认，ACK = 1，ack = w + 1，而本身的序列号是 seq = u + 1，此时，客户端就进入了 TIME-WAIT（时间等待）状态。

注意此时 TCP 链接尚未释放，必须通过 2MSL（最长报文段寿命）的时间后，当客户端撤销相应的 TCB 后，才进入 CLOSED 状态。

服务器只要收到了客户端发出的确认，当即进入 CLOSED 状态。一样，撤销 TCB 后，就结束了此次的 TCP 链接。

能够看到，服务器结束 TCP 链接的时间要比客户端早一些。

四次的缘由

这是由于服务端的 LISTEN 状态下的 SOCKET 当收到 SYN 报文的建连请求后，它能够把 ACK 和 SYN（ACK 起应答做用，而 SYN 起同步做用）放在一个报文里来发送。 但关闭链接时，当收到对方的 FIN 报文通知时，它仅仅表示对方没有数据发送给你了；但未必你全部的数据都所有发送给对方了，因此你未必会立刻会关闭 SOCKET ,也即你可能还须要发送一些数据给对方以后，再发送 FIN 报文给对方来表示你赞成如今能够关闭链接了，因此它这里的 ACK 报文和 FIN 报文多数状况下都是分开发送的.

因为 TCP 链接是全双工的，所以每一个方向都必须单独进行关闭。这个原则是当一方完成它的数据发送任务后就能发送一个 FIN 来终止这个方向的链接。收到一个 FIN 只意味着这一方向上没有数据流动，一个 TCP 链接在收到一个 FIN 后仍能发送数据。首先进行关闭的一方将执行主动关闭，而另外一方执行被动关闭。

DNS 域名解析 TOP

当你在浏览器的地址栏输入 https://juejin.im 后会发生什么，你们在心中确定是有一个大概的，这里我将 DNS 域名解析 这个步骤详细的讲一遍。在讲概念以前我先放上一张经典的图文供你们思考一分钟。

查找域名对应的 IP 地址的具体过程

1. 浏览器搜索本身的 DNS 缓存（浏览器维护一张域名与 IP 地址的对应表）；若是没有命中，进入下一步；
2. 搜索操做系统中的 DNS 缓存；若是没有命中，进入下一步；
3. 搜索操做系统的 hosts 文件（ Windows 环境下，维护一张域名与 IP 地址的对应表）；若是没有命中，进入下一步；

1. 操做系统将域名发送至 LDNS （本地区域名服务器），LDNS 查询本身的 DNS 缓存（通常命中率在 80% 左右），查找成功则返回结果，失败则发起一个迭代 DNS 解析请求：
2. LDNS向 Root Name Server（根域名服务器，如com、net、im 等的顶级域名服务器的地址）发起请求，此处，Root Name Server 返回 im 域的顶级域名服务器的地址；
3. LDNS 向 im 域的顶级域名服务器发起请求，返回 juejin.im 域名服务器地址；
4. LDNS 向 juejin.im 域名服务器发起请求，获得 juejin.im 的 IP 地址；
5. LDNS 将获得的 IP 地址返回给操做系统，同时本身也将 IP 地址缓存起来；操做系统将 IP 地址返回给浏览器，同时本身也将 IP 地址缓存起来。

DNS Prefetch

即 DNS 预获取，是前端优化的一部分。通常来讲，在前端优化中与 DNS 有关的有两点：

1. 减小 DNS 的请求次数
2. 进行 DNS 预获取

典型的一次 DNS 解析须要耗费 20-120 毫秒，减小DNS解析时间和次数是个很好的优化方式。DNS Prefetching 是让具备此属性的域名不须要用户点击连接就在后台解析，而域名解析和内容载入是串行的网络操做，因此这个方式能减小用户的等待时间，提高用户体验。

五类 IP 地址 TOP

详见 下一篇

跨域的缘由及处理方式 TOP

详见下一篇

正向代理和反向代理 TOP

详见下一篇

CDN 带来的性能优化 TOP

详见下一篇

HTTP 强缓存&协商缓存 TOP

详见下一篇

若是你看完了，还不过瘾的话；我推荐你看下我写的两篇关于继承的文章，看完以后，想必你会有一个新的认识。
【前端词典】继承（一） - 面试官问的你都会吗？
【前端词典】继承（二） - 回的八种写法·面试必问

参考

1. 《图解 HTTP》
2. 《计算机网络基础》
3. blog.csdn.net/qzcsu/artic…
4. segmentfault.com/a/119000001…
5. developer.mozilla.org/zh-CN/docs/…

前端词典系列

《前端词典》这个系列会持续更新，每一期我都会讲一个出现频率较高的知识点。但愿你们在阅读的过程中能够斧正文中出现不严谨或是错误的地方，本人将不胜感激；若经过本系列而有所得，本人亦将不胜欣喜。

若是你以为个人文章写的还不错，能够关注个人微信公众号，公众号里会提早剧透呦。

你也能够添加个人微信 wqhhsd， 欢迎交流。

下期预告

【前端词典】进阶必备的网络基础（下）

传送门

1. 【前端词典】和媳妇讲代理后的意外收获
2. 【前端词典】滚动穿透问题的解决方案
3. 继承（一） - 原型链你真的懂吗？
4. 【前端词典】继承（二） - 回的八种写法·面试必问
5. 【前端词典】进阶必备的网络基础（下）