[TOC]

0. HTTP协议的组成

HTTP 协议主要由三大部分组成：

  • 起始行（start line）：描述请求或响应的基本信息；
  • 头部字段（header）：使用 key-value 形式更详细地说明报文；
  • 消息正文（entity）：实际传输的数据，它不一定是纯文本，可以是图片、视频等二进制数据。
    计算机网络大总结 - 图1
  • 计算机网络大总结 - 图2
  • 计算机网络大总结 - 图3

http: https://blog.csdn.net/qq_36894974/article/details/103930478?utm_source=app&app_version=4.16.0
参考文章：https://blog.csdn.net/pashanhu6402/article/details/96428887 （socket）

1、GET请求和POST请求的区别？

GET 和 POST请求本质上就是 TCP链接，并无差别。但是由于 HTTP 和浏览器/服务器的限制，导致他们在应用过程中出现了一些不同。

  • 1、请求次数不同
    • GET请求会产生一个 TCP 的数据包
    • POST请求会产生两个TCP的数据包
    • 因为对于GET请求来说，浏览器会将 header 和 data一起发送出去，服务器响应200（返回数据）；但是对于 POST 请求来说，浏览器会先发送 header，其次服务器返回 100 countinue，然后再将 data 发送出去，最后服务器返回200
    • 另外的话，不是所有的浏览器都会在POST请求中发送两次包，火狐只会发送一次
  • 2、参数的编码方式不同
    • GET只支持URL编码（ASCII 16进制）
    • POST请求支持多种编码方式
  • 3、请求参数的位置不同
    • GET 请求的参数是拼接在 URL的后面
    • POST请求的参数是放在了请求体里面
    • 从这个角度来说，POST请求可能会比GET请求更安全，因为POST请求没有把参数放到url里（有了ssl、http就变成了https，解决了这个问题）
  • 4、缓存
    • 对应GET请求来说，它会被浏览器进行缓存
    • 但是POST请求不会
  • 5、应用场景不同
    • GET 请求一般用于对服务器资源不会产生影响的场景，比如说，请求一个网页
    • POST请求一般用于会对服务器资源产生影响的场景，比如说，注册用户等类似的操作

注意：http 协议并没，没有对get和post请求的长度进行限制，所谓的浏览器长度限制是由浏览器和 服务器决定和设置的。

2、HTTP 的请求方法（9种）

HTTP 1.0：HEAD、GET和POST
HTTP 1.1：其余6种

  • GET
    • 向特定的资源发送请求，返回相应的数据
  • HEAD
    • 和get 请求类似，只不过对应 head 而言，服务器不会返回响应体。
    • 最常见的好像就是在下载一个大文件前，先获取它的大小，然后再决定是否下载
  • POST
    • 向指定的资源提交数据进行处理请求（上传文件或表单请求）
  • OPTION
    • 预检请求，获取服务器所支持的通信选项（请求方式）
  • PUT
    • 请求替换目标的资源
  • DELETE
    • 删除指定的资源
  • PATCH
    • 对指定的资源进行部分修改
  • CONNECT
    • 开启一个客户端到所请求资源之间的一个通道
  • TRACE
    • 请求的服务器返回其受到的请求信息，主要用来做 http 的测试和诊断

3、http的请求头，响应头

请求头：

  • Accpet
    • 告诉服务端,客户端接收什么类型的响应
  • Referer
    • 表示这是请求是从哪个URL进来的,比如想在网上购物,但是不知道选择哪家电商平台,你就去问度娘,说哪家电商的东西便宜啊,然后一堆东西弹出在你面前,第一给就是某宝,当你从这里进入某宝的时候,这个请求报文的Referer就是www.baidu.com
  • Cache-Control
    • 对缓存进行控制,如一个请求希望响应的内容在客户端缓存一年,或不被缓可以通过这个报文头设置
  • Accept-Encoding
    • 这个属性是用来告诉服务器能接受什么编码格式,包括字符编码,压缩形式(一般都是压缩形式)
      • 例如:Accept-Encoding:gzip, deflate(这两种都是压缩格式)
  • Host
    • 指定要请求的资源所在的主机和端口
  • User-Agent 作用：告诉服务器，客户端使用的操作系统、浏览器版本和名称

响应头：

  • Cache-Control
    • 响应输出到客户端后,服务端通过该属性告诉客户端该怎么控制响应内容的缓存
  • ETag
    • 表示你请求资源的版本,如果该资源发生啦变化,那么这个属性也会跟着变
  • Location
    • 在重定向中或者创建新资源时使用

  • Set-Cookie

    • 服务端可以设置客户端的cookie

      计算机网络大总结 - 图4

      通用报头

      既可以出现在请求报头，也可以出现在响应报头中

  • Date：表示消息产生的日期和时间

  • Connection：允许发送指定连接的选项，例如指定连接是连续的，或者指定“close”选项，通知服务器，在响应完成后，关闭连接

  • Cache-Control：用于指定缓存指令，缓存指令是单向的（响应中出现的缓存指令在请求中未必会出现），且是独立的（一个消息的缓存指令不会影响另一个消息处理的缓存机制）

    请求报头

    请求报头通知服务器关于客户端求求的信息，典型的请求头有：

  • Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机

  • User-Agent：发送请求的浏览器类型、操作系统等信息
  • Accept：客户端可识别的内容类型列表，用于指定客户端接收那些类型的信息
  • Accept-Encoding：客户端可识别的数据编码
  • Accept-Language：表示浏览器所支持的语言类型
  • Connection：允许客户端和服务器指定与请求/响应连接有关的选项，例如这是为Keep-Alive则表示保持连接。

  • Transfer-Encoding：告知接收端为了保证报文的可靠传输，对报文采用了什么编码方式。

    响应报头

    用于服务器传递自身信息的响应，常见的响应报头：

  • Location：用于重定向接受者到一个新的位置，常用在更换域名的时候

  • Server：包含可服务器用来处理请求的系统信息，与User-Agent请求报头是相对应的

    实体报头

    实体报头用来定于被传送资源的信息，既可以用于请求也可用于响应。请求和响应消息都可以传送一个实体，常见的实体报头为：

  • Content-Type：发送给接收者的实体正文的媒体类型

  • Content-Lenght：实体正文的长度
  • Content-Language：描述资源所用的自然语言，没有设置则该选项则认为实体内容将提供给所有的语言阅读
  • Content-Encoding：实体报头被用作媒体类型的修饰符，它的值指示了已经被应用到实体正文的附加内容的编码，因而要获得Content-Type报头域中所引用的媒体类型，必须采用相应的解码机制。
  • Last-Modified：实体报头用于指示资源的最后修改日期和时间

  • Expires：实体报头给出响应过期的日期和时间

    3、HTTP常见的状态码

    状态码是由三个十进制的数字组成的，第一个数字代表的是类型。状态码分为五类

  • 1xx，信息的响应，服务器收到请求，需要客户端继续执行操作

  • 2xx，成功的响应，服务器已经接收到了请求，并进行了处理
  • 3xx，重定向，需要进一步操作以完成请求
  • 4xx，客户端错误，请求包含语法错误或无法完成请求
  • 5xx，服务端错误，服务器在处理请求的过程中发生了错误

常见的有

  • 100 Continue，请求服务器已经收到，应该继续发送请求
  • 200 OK，表示请求成功
  • 201 Created，成功请求并创建了新的资源
  • 202 Accepted，已接收到了请求，但是请求还没有处理完成
  • 301 Moved Permanently，永久重定向，表示请求的资源已经分配到了新的 url ，应该请求新的 URL
  • 302 Found，临时重定向，也表示的是请求的资源被定为到了新的 url 上，应该请求新的 url
    • 301与302的区别：前者是永久移动，后者是临时移动（之后可能还会更改URL）
  • 303 See Other：表示请求的资源被分配了新的URL，应使用GET方法定向获取请求的资源；
  • 304 Not Modified：说明无需再次传输请求的内容，也就是说可以使用缓存的内容
  • 400 Bad Request：表示请求报文中存在语法错误；
  • 401 Unauthorized：未经许可，需要通过HTTP认证；
  • 403 Forbidden：服务器拒绝该次访问（访问权限出现问题）
  • 404 Not Found：表示服务器上无法找到请求的资源，除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用；
  • 405 Method Not Allowed：服务器禁止了使用当前HTTP方法的请求
  • 500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时；
  • 501 Not Implemented：请求的方法不被服务器支持，因此无法被处理
  • 502 Bad Gateway：作为网关或代理角色的服务器，从上游服务器（如tomcat）中接收到的响应是无效的

  • 503 Server Unavailable：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求；

    4、HTTP1.0、HTTP1.1和HTTP2.0的区别

    1.0和1.1的区别

  • （1）首先是连接方面的区别

    • 1.0的话，默认支持的是短连接，也就是一次http请求需要建立一次 tcp连接，请求完之后，连接就会断开
      • 非标准字段：Connection：keep-alive
    • 1.1默认采用的是长连接，多个 http 请求可以服用一次 tcp的连接，这样做的话可以避免每次发送请求都需要建立连接的时延，对于同一个域名，做多允许同时建立6个持久连接
  • （2）请求方式的区别
    • 1.0，只支持 head、get、post
    • 1.1，新增了几种。put、delete等
  • (3)带宽优化及网络连接的使用，
    • HTTP1.0中，存在一些浪费带宽的现象，例如客户端只是需要某个对象的一部分，而服务器却将整个对象送过来了，并且不支持断点续传功能，
    • HTTP1.1则在请求头引入了range头域，它允许只请求资源的某个部分，即返回码是206（Partial Content），这样就方便了开发者自由的选择以便于充分利用带宽和连接

2.0

  • 连接共享也就是多路复用，减低开销，具体说就是一次tcp连接可以处理多次请求，和1.1的区别是
  • 使用二进制进行传输（1.x使用的是普通文本）
  • 支持服务端推送，可以在未经客户端允许的情况下，向客户端推送内容
  • 头部压缩。http2.0使用encoder来减少需要传输的header大小。高效的压缩算法可以很大的压缩header，减少发送包的数量从而降低延迟

5、http和https的区别

  • 首先是端口号不同。http使用的是80端口，而https使用的是443端口
  • http使用明文进行传输，安全性比较差，而https它的话是基于http协议，通过SSL（TLS）提供加密处理的，所以安全性比较好
  • https需要到CA申请证书，一般的话，证书是收费的
  • http的页面响应速度比https快，因为http只需要tcp建立3次连接，而https除了tcp三次连接还需要加上ssl握手需要的9个包，一共12个

  • HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议，所以，要比较 HTTPS 比 HTTP 要更耗费服务器资源

    https的连接过程

  • 计算机网络大总结 - 图5

    ca证书的验证过程

    ca证书类似于网络的身份证, 由ca机构颁发, 用来证明网站是合法的
    验证过程就是网站把自己的ca证书发来, 其中带有公钥 有效期等等信息

6、ssl和tls

为网络通信提供安全及数据完整性的一种安全协议。

ssl：安全套接字协议

tls：传输层安全

TLS与SSL在传输层与应用层之间对网络连接进行加密

18、SSL对称加密和非对称加密

对称加密
加密算法是公开的，靠的是密钥来加密数据。
使用一个密钥加密，使用相同的密钥才能成功解密。

  • 优点：计算量小、加密和解密速度比较快
  • 缺点：密钥容易泄露，在传输加密数据之前需要传递密钥，一个用户对应一个密钥，服务端管理密钥麻烦。

非对称加密
机密算法公开，有一个公钥和一个私钥。公钥和私钥需要加密算法生成。

  • 公钥加密只能私钥解密
  • 私钥加密只能由公钥解密

服务器发送公钥给客户端，服务器保存公钥和私钥。

  • 优点：数据传输安全
  • 缺点：计算量大、加密解密的速度慢

6、DNS(域名系统)的解析过程

  • （1）首先判断本地缓存中是否存在该域名所对应的 IP地址的缓存。没有，就会向本地的 DNS服务器发送请求
  • （2）本地的DNS首先会看是否存在对应的缓存，如果没有，就会向根域名服务器发起请求
  • （3）获得负责顶级域名服务器的地址后，再向顶级域名服务器发送请求
  • （4）获得负责的权威域名服务器的地址后，会向权威域名服务器发起请求
  • （5）获得相应的IP地址后，就会返回给用户

用户向本地DNS服务器查询属于递归查询，本地的DNS服务器向各级域名服务器发起请求属于迭代查询。
递归查询指的是查询请求发出后，域名服务器代为向下一级域名服务器发出请求，最后向用户返回查询的最终结果。使用递归查询，用户只需要发出一次查询请求。
迭代查询指的是查询请求后，域名服务器返回单次查询的结果。下一级的查询由用户自己请求。使用迭代查询，用户需要发出多次的查询请求

缓存 -> 本地DNS服务器 -> 根域名服务器 -> 顶级域名服务器 -> 权威域名服务器 -> 获得IP地址返回给用户

7、TCP的三次握手

  • 第一次：客户端向服务器发送一个 SYN的请求报文段和一个随机序号seq，发送完毕后，进入 SYN_SEND状态
  • 第二次：服务器接收到了客户端发送的 SYN 请求报文段，得知客户端想要建立连接，于是就返回一个 SYN ACK （确认字符 1:有效）的报文段，确认连接请求，另外还会服务器发送一个随机序号，发送完毕后，就进入了SYN_RECV状态
  • 第三次：客户端收到了服务器的确认应答后，就进入了连接等待状态，向服务器发送一个ACK报文段，服务器收到后，也进入了连接状态。

计算机网络大总结 - 图6
SYN(同步序列编号)

为什么是三次握手？
为了防止服务器一直等待，然后浪费资源
出现这种情况

  • 客户端发送连接建立请求，然后由于网络延迟，迟迟没有到达服务端
  • 这时候由于超时重传，客户端由发送了一次请求建立连接，这次一切正常
  • 当这个新的连接关闭后，之前的连接来了，服务端进行响应，然后等待客户端发送数据
  • 但是由于客户端已经数据传输完毕了，就不理会这次，就造成了服务端一直等到客户端发送数据，造成数据浪费

详解TCP的三次握手和四次挥手

8、TCP四次挥手

  • 第一次挥手，客户端认为没有数据要再发送给服务器端，它就向服务器发送一个 FIN 报文段，申请断开客户端到服务器端的 连接。发送后客户端进入 FIN_WAIT_1 状态。
  • 第二次挥手，服务器端接收到客户端释放连接的请求后，向客户端发送一个确认报文段，表示已经接收到了客户端释放连接的 请求，以后不再接收客户端发送过来的数据。但是因为连接是全双工的，所以此时，服务器端还可以向客户端发送数据。服务 器端进入 CLOSE_WAIT 状态。客户端收到确认后，进入 FIN_WAIT_2 状态。
  • 第三次挥手，服务器端发送完所有数据后，向客户端发送 FIN 报文段，申请断开服务器端到客户端的连接。发送后进入 LAS T_ACK 状态。
  • 第四次挥手，客户端接收到 FIN 请求后，向服务器端发送一个确认应答，并进入 TIME_WAIT 阶段。该阶段会持续一段时间， 这个时间为报文段在网络中的最大生存时间，如果该时间内服务端没有重发请求的话，客户端进入 CLOSED 的状态。如果收到 服务器的重发请求就重新发送确认报文段。服务器端收到客户端的确认报文段后就进入 CLOSED 状态，这样全双工的连接就被 释放了。

计算机网络大总结 - 图7
TCP 使用四次挥手的原因是因为 TCP 的连接是全双工的，所以需要双方分别释放到对方的连接，单独一方的连接释放，只代 表不能再向对方发送数据，连接处于的是半释放的状态。

最后一次挥手中，客户端会等待一段时间再关闭的原因，是为了防止发送给服务器的确认报文段丢失或者出错，从而导致服务器 端不能正常关闭。

9、TCP和UDP的区别

  • 首先是名称上的区别，tcp叫做传输控制协议，udp叫做用户数据包协议
  • tcp是面向连接的，udp是无连接的，简答来说就是发送数据前不需要建立连接
  • tcp是可靠传输的，也就是在传输数据时tcp会保证数据无差错、不丢失、不重复、按需到达；udp是尽最大努力交付
  • tcp面向字节流，udp面向报文

11、拥塞控制

TCP 的拥塞控制主要是根据网络中的拥塞情况来控制发送方数据的发送速率，如果网络处于拥塞的状态，发送方就减小发送的 速率，这样一方面是为了避免继续增加网络中的拥塞程度，另一方面也是为了避免网络拥塞可能造成的报文段丢失。

TCP 的拥塞控制主要使用了四个机制，分别是慢启动、拥塞避免、快速重传和快速恢复。

慢启动的基本思想是，因为在发送方刚开始发送数据的时候，并不知道网络中的拥塞程度，所以先以较低的速率发送，进行试探 ，每次收到一个确认报文，就将发动窗口的长度加一，这样每个 RTT （往返延时）时间后，发送窗口的长度就会加倍。当发送窗口的大小达 到一个阈值的时候就进入拥塞避免算法。

拥塞避免算法是为了避免可能发生的拥塞，将发送窗口的大小由每过一个 RTT 增长一倍，变为每过一个 RTT ，长度只加一。 这样将窗口的增长速率由指数增长，变为加法线性增长。

快速重传指的是，当发送方收到三个冗余的确认应答时，因为 TCP 使用的是累计确认的机制，所以很有可能是发生了报文段的 丢失，因此采用立即重传的机制，在定时器结束前发送所有已发送但还未接收到确认应答的报文段。

快速恢复是对快速重传的后续处理，因为网络中可能已经出现了拥塞情况，所以会将慢启动的阀值减小为原来的一半，然后将拥 塞窗口的值置为减半后的阀值，然后开始执行拥塞避免算法，使得拥塞窗口缓慢地加性增大。简单来理解就是，乘性减，加性增。

TCP 认为网络拥塞的主要依据是报文段的重传次数，它会根据网络中的拥塞程度，通过调整慢启动的阀值，然后交替使用上面四 种机制来达到拥塞控制的目的。

12、流量控制

TCP 提供了流量控制的服务，这个服务的主要目的是控制发送方的发送速率，保证接收方来得及接收。因为一旦发送的速率大 于接收方所能接收的速率，就会造成报文段的丢失。接收方主要是通过接收窗口来告诉发送方自己所能接收的大小，发送方根据 接收方的接收窗口的大小来调整发送窗口的大小，以此来达到控制发送速率的目的。

13、TCP是如何保证可靠传输的

校验和：
发送的数据包的二进制相加然后取反，目的是检测数据在传输过程中的任何变化。如果收到段的检验和有差错，TCP将丢弃这个报文段和不确认收到此报文段。

确认应答+序列号（累计确认+seq）

超时重传

流量控制

拥塞控制

14、输入一个url发生的过程

1）首先会对 url 进行解析，分析所需要使用的传输协议和请求资源的路径。如果输入的 url 中的协议或主机名不是合法的，那么将会把地址栏输入的内容传递给搜索引擎。如果没有问题的话，浏览器会检查 url 中是否出现非法字符，如果出现就对非法字符进行转义。

（2）浏览器会判断请求的资源是否存在于缓存里面，如果存在且没有失效，那么就会直接使用。否则就会向服务器发送网络请求。

（3）接下来我们就要知道输入的 url中域名所对应的 IP地址。首先会判断本地缓存中是否有该域名所对应的IP地址的缓存，如果没有的话，就会对本地的 DNS 服务器发起请求。本地的 DNS 服务器也会先检查是否存在缓存，如果没有的话就会向根域名服务器发起请求，获得负责顶级域名服务器的地址后，再请顶级域名服务器发起请求，然后获得负责的权威域名服务器的地址后，再向权威域名服务器发起请求，最终获得域名的IP地址；获得了IP地址之后，会将这个IP地址返回给用户。

本地DNS -> 根域名服务器 -> 顶级域名服务器 -> 权威域名服务器 -> 最终获得IP地址 —>返回给用户

（5）下面就是三次握手的建立，首先是客户端向服务器发送一个SYN 连接请求报文段和一个随机序号（seq）；服务器接收到请求后会向客户端发送一个 SYN ACK 报文段，表示确认连接请求，另外也会向客户端发送一个随机序号；客户端接收到了服务器的确认应答后，就会进入连接建立的状态，同时向服务器发送一个 ACK确认报文段，服务器段接收确认后，也进入连接建立状态，此时双方的连接就正式的建立了起来。

（6）如果是https，会在通信前有一个TLS握手的过程。（可不说这一步）

（7）当页面的请求发送到服务器后，服务器会返回一个 html 文件作为响应，浏览器收到响应后，就开始对 html 文件进行解析。

（8）浏览器会首先根据 html 文件构建 DOM 树，其次根据 css 文件构建 CSSOM树。当 DOM 树和 CSSOM 树构建完成后，会根据它们来生成渲染树。当渲染树生成好了之后，会根据渲染树来进行布局。布局完成后，浏览器会通过使用浏览器的 UI 接口对页面进行绘制，这个时候页面就绘制好了。

15.浏览器的缓存机制(http缓存机制)

参考：https://juejin.cn/post/6867451120458694670
缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，降低网络负荷。
对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。
接下来的内容中我们将通过缓存位置、缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。
浏览器与服务器通信的方式为应答模式，即是：浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中，简单的过程如下图：
计算机网络大总结 - 图8
1、浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
2、浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中
以上两点结论就是浏览器缓存机制的关键，他确保了每个请求的缓存存入与读取，只要我们再理解浏览器缓存的使用规则，那么所有的问题就迎刃而解了，本文也将围绕着这点进行详细分析。

根据是否需要向服务器重新发起HTTP请求将缓存过程分为两个部分，分别是强制缓存和协商缓存 。
计算机网络大总结 - 图9

1.强制缓存 Cache-control

强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程，强制缓存的情况主要有三种(暂不分析协商缓存过程)，如下：
1.1不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求
1.2存在该缓存结果和缓存标识，但是结果已经失效，强制缓存失效，则使用协商缓存
1.3存在该缓存结果和缓存标识，且该结果没有还没有失效，强制缓存生效，直接返回该结果
计算机网络大总结 - 图10
那么强制缓存的缓存规则是什么？
答：当浏览器向服务器发送请求的时候，服务器会将缓存规则放入HTTP响应的报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Conctrol的优先级比Expires高。
计算机网络大总结 - 图11

1.2内存缓存(from memory cache)和硬盘缓存(from disk cache)

（1）内存缓存(from memory cache)：内存缓存具有两个特点，分别是快速读取和时效性：
1、快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取。
2、时效性：一旦该进程关闭，则该进程的内存则会清空。
（2）硬盘缓存(from disk cache)：硬盘缓存则是直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢。

在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

2.协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程
计算机网络大总结 - 图12
这两组搭档都是成对出现的，即第一次请求的响应头带上某个字段（Last-Modified或者Etag），则后续请求则会带上对应的请求字段（If-Modified-Since或者If-None-Match），若响应头没有Last-Modified或者Etag字段，则请求头也不会有对应的字段。

1.Last-Modified/If-Modified-Since
二者的值都是GMT格式的时间字符串，具体过程：

  - 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Last-Modified的header，这个header表示这个资源在服务器上的最后修改时间
  - 浏览器再次跟服务器请求这个资源时，在request的header上加上If-Modified-Since的header，这个header的值就是上一次请求时返回的Last-Modified的值
  - 服务器再次收到资源请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化，如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。当服务器返回304 Not Modified的响应时，response header中不会再添加Last-Modified的header，因为既然资源没有变化，那么Last-Modified也就不会改变，这是服务器返回304时的response header
  - 浏览器收到304的响应后，就会从缓存中加载资源
  - 如果协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified的Header在重新加载的时候会被更新，下次请求时，If-Modified-Since会启用上次返回的Last-Modified值

2.Etag/If-None-Match


这两个值是由服务器生成的每个资源的唯一标识字符串，只要资源有变化就这个值就会改变；其判断过程与Last-Modified/If-Modified-Since类似，与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag跟之前的没有变化。
计算机网络大总结 - 图13

你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要Etag呢？HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：

  • 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET；
  • 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；
  • 某些服务器不能精确的得到文件的最后修改时间。

这时，利用Etag能够更加准确的控制缓存，因为Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符。
Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。

16、TCP/IP OSI七层模型架构

OSI:开放式系统互联
OSI七层参考模型的各个层次的划分遵循下列原则：
1、同一层中的各网络节点都有相同的层次结构，具有同样的功能。
2、同一节点内相邻层之间通过接口（可以是逻辑接口）进行通信。
3、七层结构中的每一层使用下一层提供的服务，并且向其上层提供服务。
4、不同节点的同等层按照协议实现对等层之间的通信。
计算机网络大总结 - 图14
1、物理层：负责光电信号传递方式。集线器工作在物理层。以太网协议。
2、数据链路层：负责设备之间的数据帧的传输和识别。交换机工作在数据链路层。例如网卡设备的驱动，帧同步，冲突检测，数据差错校验等工作。
3、网络层：负责地址管理和路由选择。路由器工作在网络层。
4、传输层：负责两台主机之间的数据传输。
5、应用层：负责应用程序之间的沟通。网络编程主要针对的就是应用层。

tcp:属于传输层
http：属于应用层

17、WebSocket是否有了解

1.是什么，Websocket是一种应用层协议，和http一样。
2.有什么用，实现了服务端和客户端的全双工通信，服务端数据变化时候能及时的通知到客户端。
3.与其他的区别：
http只能由客户端发起，Websocket是双向的
webSocket传输的数据包相对来说比较小，
没有同源限制，可以跨域共享资源

19、同源策略跨域

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。
所谓同源是指：域名、协议、端口相同。
同源策略又分为以下两种：

  1. DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。
  2. XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。

    为什么要有跨域限制

    因为存在浏览器同源策略，所以才会有跨域问题。那么浏览器是出于何种原因会有跨域的限制呢。其实不难想到，跨域限制主要的目的就是为了用户的上网安全。
    如果浏览器没有同源策略，会存在什么样的安全问题呢。下面从 DOM 同源策略和 XMLHttpRequest 同源策略来举例说明：
    如果没有 DOM 同源策略，也就是说不同域的 iframe 之间可以相互访问：
    如果 XMLHttpRequest 同源策略，那么黑客可以进行 CSRF（跨站请求伪造） 攻击：

    1.jsonp

    在页面上有三种资源是可以与页面本身不同源的。它们是：js脚本，css样式文件，图片
    而jsonp就是利用了
  • JSONP跨域的缺点
    JSONP只能解决get请求，不能解决post请求。

jsonp： https://www.cnblogs.com/digdeep/p/4170059.html

2.CORS 跨域资源共享

这个主要在服务端使用node的时候进行配置。
通过设置响应头配置了CORS跨域。主要设置以下几个属性。
app.all(““,function(req,res,next){ //设置允许跨域的域名，代表允许任意域名跨域 res.header(“Access-Control-Allow-Origin”,”*”); //允许的header类型 res.header(“Access-Control-Allow-Headers”,”content-type”); //跨域允许的请求方式 res.header(“Access-Control-Allow-Methods”,”DELETE,PUT,POST,GET,OPTIONS”); if (req.method.toLowerCase() == ‘options’) res.send(200); //让options尝试请求快速结束 else next(); });

3.webpack 中 配置webpack-dev-server

devServer: { proxy:{ ‘/api’:{ target:’http://localhost:3000‘, //请求域名 changeOrigin: true, //是否跨域 pathRewrite:{‘/api’:’’} } } },

4.使用Nginx进行跨域（Nginx反向代理）

这个时候我们手里只有html、css、js等静态文件，后台接口地址都会访问不到。这个时候Nginx就登场了，Nginx反向代理配置和Webpack大同小异，匹配到动态的地址时将请求转发到一个服务器地址实现跨域。
server { listen 3000; //监听的本地端口 server_name localhost; location /api { //匹配到/api开头的接口时，转发到下面的服务器地址 root html; proxy_pass http://192.168.xxx.xxx:8080; //服务器地址 } location =/ { root html; index index.htm index.html; //默认主页 } # 所有静态请求都由nginx处理，存放目录为html location ~ .(htm|html|js|css|jpg|png|gif|eot|svg|ttf|woff|woff2)$ { root html; //配置静态资源地址 } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }

20、cookie、session、token

session
session的翻译是会话，用户打开一个Web页面时，便于Web服务器产生一次session。服务器使用session把用户信息临时存在了服务器上，用户离开网站后session会销毁。
cookie
cookie是保存在本地终端的数据。cookie由服务器生成，发送给浏览器，浏览器把cookie以kv形式保存在某个目录下的文本文件内，下一次请求同一网站时会把该cookie发送给服务器。
cookie的组成有：名称(key)、值(value)、有效域(domain)、路径(域的路径，一般设置为全局:”\”)、失效时间、安全标志(指定后，cookie只有在使用SSL连接时才发送到服务器(https))。
cookie是保存在客户端的，所以浏览器加入了一些限制确保cookie不会被恶意使用，而且不会占用太多资源，所以cookie信息是有限的。
token
token的意思是令牌，是用户身份的验证方式。最简单的token信息：
uid（用户的唯一标识）、time（当前时间的事件戳）、sign（签名，由token的前几位+哈希算法压缩为一定长的十六进制字符串）。

  1. session是存在服务器上的，cookie是保存在客户端的
  2. cookie是保存在客户端的，所以就可能会被人分析COOKIE信息进行cookie欺骗，（不安全）
  3. 单个cookie保存的数据不能超过4k，很多浏览器都限制最多能保存20个cookie
  4. session保存在服务端，访问增多时，会占用服务器的性能
  5. token由于有更多的验证，所以比session更加安全一些（在身份验证方面）因为session只是认证手段，而token是授权App的，下次登陆app时，验证你已经登陆过app

计算机网络大总结 - 图15
1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
5、web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
6、web Storage的api接口使用更方便

21、mvvm和mvc的区别

1、mvvm各部分的通信是双向的，而mvc各部分通信是单向的；
2、mvvm是真正将页面与数据逻辑分离放到js里去实现，而mvc里面未分离
MVC
MVC是包括view视图层、controller控制层、model数据层。各部分之间的通信都是单向的。
View 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状态Model 将新的数据发送到 View，用户得到反馈
MVVM
MVVM包括view视图层、model数据层、viewmodel层。各部分通信都是双向的。采用双向数据绑定，View的变动，自动反映在 ViewModel，反之亦然。其中ViewModel层，就是View和Model层的粘合剂，他是一个放置用户输入验证逻辑，视图显示逻辑，发起网络请求和其他各种各样的代码的极好的地方。说白了，就是把原来ViewController层的业务逻辑和页面逻辑等剥离出来放到ViewModel层
MVC与MVVM的区别
在MVC里，View是可以直接访问Model的，所以View里会包含Model信息以及一些业务逻辑。 MVC模型关注的是Model的不变，所以在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的。
MVVM在概念上是真正将页面与数据逻辑分离的模式，它把数据绑定工作放到一个JS里去实现，而这个JS文件的主要功能是完成数据的绑定，即把model绑定到UI的元素上。此外MVVM另一个重要特性双向绑定，它更方便你去同时维护页面上都依赖于某个字段的N个区域，而不用手动更新它们。
计算机网络大总结 - 图16

22、MIME

“Multipurpose Internet Mail Extensions”多功能Internet邮件扩充服务，它是一种多用途网际邮件扩充协议。
1.作用
服务器会将它们发送的多媒体数据的类型告诉浏览器，而通知手段就是说明该多媒体的MIME类型，从而让浏览器知道接受到的信息哪些是MP3，哪些是Shockwave文件等等。
服务器将MIME标识符放入传送的数据中来告诉浏览器使用哪个插件读取相关文件

23、怎么实现多个网站之间共享登录状态

我认为单点登录可以这样来实现，首先将用户信息的验证中心独立出来，作为一个单独的认证中心，该认证中心的作用是判断客户端发
送的账号密码的正确性，然后向客户端返回对应的用户信息，并且返回一个由服务器端秘钥加密的登录信息的 token 给客户端，该
token 具有一定的有效时限。当一个应用系统跳转到另一个应用系统时，通过 url 参数的方式来传递 token，然后转移到的应用站
点发送给认证中心，认证中心对 token 进行解密后验证，如果用户信息没有失效，则向客户端返回对应的用户信息，如果失效了则将
页面重定向会单点登录页面。

24、路由懒加载

路由懒加载能做到性能优化的原因就是：webpack会将懒加载的路由分块打包到一个单独的js中去，只有加载该路由的时候，才会加载这个chunk文件。
计算机网络大总结 - 图17计算机网络大总结 - 图18计算机网络大总结 - 图19

25、V8引擎

计算机网络大总结 - 图20
计算机网络大总结 - 图21

JIT

计算机网络大总结 - 图22

26. 前端性能优化

1.原则

多使用内存，缓存或者其他方法
减少CPU计算，减少网络请求
减少IO操作（硬盘读写）

2.加载资源优化

静态资源的合并和压缩。
静态资源缓存（浏览器缓存策略）。
使用CDN让静态资源加载更快。

3. 渲染优化

CSS放head中，JS放body后
图片懒加载
减少DOM操作，对DOM操作做缓存
减少DOM操作，多个操作尽量合并在一起执行
事件节流
尽早执行操作 DOMContentLoaded

1. DNS预解析

2. 异步加载

非核心代码异步加载 — 异步加载的方式 — 区别
1.动态脚本加载
用js创建
2.defer
3.async
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。 有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

3. 事件节流

监听文字改变事件，无操作100毫秒后执行操作，不用每次触发。
var textarea = document.getElementById(‘ta’); var timeoutId; textarea.addEventListener(‘keyup’,function(){ if(i){ clearTimeout(i); } timeoutId = setTimeout(() => { //操作 }, 100); });
事件节流主要用于触发频率较高的事件，设定一个缓冲触发事件。

4. 合并dom插入

    var listNode = document.getElementById('list');         var flag = document.createDocumentFragment();         var li;         for (let i = 0; i < 10; i++) {             li = document.createElement('li');             li.innerHTML = i;             flag.appendChild(li);         }         listNode.appendChild(flag);<br />10次dom插入 ---> 1次dom插入

5. 缓存DOM查询

    //没有缓存dom         for (let i = 0; i < document.getElementsByTagName('p').length; i++) {         }         //缓存dom         var p = document.getElementsByTagName('p');         for (let i = 0; i < p.length; i++) {         }

6. 懒加载

<img src="preview.png" realsrc="abc.png" id="img1" />     <script>         var i = document.getElementById('img1');         i.src = i.getAttribute('realsrc');     </script>

7. 资源合并

a.js b.js c.js —- abc.js
计算机网络大总结 - 图23