前端面试题（二、HTTP协议）

OSI七层网络模型

1. 物理层：数据格式——比特流

2. 数据链路层：数据格式——帧使用MAC地址通信

3. 网络层：数据格式——数据报，IP协议。拥有路由器，转发数据

4. 传输层：TCP UDP向高层屏蔽了下层通信的细节，解决数据包的错误、失序等问题

5. 会话层

6. 表示层

7. 应用层：例如DNS， HTTP，电子邮件协议SMTP协议

TCP/IP协议指的不只是两个协议，其实也是四层网络模型（链路层、网络层、传输层、应用层），他其实是一个协议族（还包括UDP ICMP HTTP等），只不过这两个更具有代表性。

一次完整的HTTP服务 | 浏览器输入地址发生了什么

0. 对输入进行解析

        浏览器进程将完整的url通过进程间通信IPC，发送给网络进程。

1. 网络进程对url地址进行DNS域名解析，拿到目标网址对应的IP地址

        DNS查找顺序如下：

        （1）浏览器自身缓存
        （2）本地DNS缓存，操作系统host文件的域名缓存
        （3）本地域名服务器，递归查询自己的缓存
        （4）上级域名服务器迭代查询（本地域名服务器->根域名服务器返回顶级域名,本地服务器再去顶级域名服务器找,...）

2. 与IP主机进行TCP三次握手连接

        TCP是可靠连接，可以保证数据的不丢失、不重复、不失序。发生错误，也会进行重传。

        第一次：浏览器发送SYN包，表示想要建立连接。
        第二次：服务端发送SYN+ACK包，表示收到了浏览器的请求，允许建立连接。服务端
        第三次：浏览器发送ACK包，表示连接建立成功

两次握手的话，客户端可以确保服务端收到自己的请求，服务端发的响应客户端也能收到。但是接收方只能确定能收到包，但不确保接收方发的包对方可以收到。如果此时网络拥堵客户端发送了多个TCP连接请求，那么延时到达的请求又想要和服务器建立连接，服务器复可以，就等待浏览器给自己发送数据，始终等不到。

3. 发起HTTP请求

        请求行：请求方法-请求地址 http协议
        请求头：Referer（我是谁）,Connection, cookie, content-type
        空行
        请求体

4. 服务器响应，返回html代码

        响应头携带本次请求的状态码(见前端面试一)

        响应行：协议 状态码
        响应头：content-type数据类型，Content-length：数据长度
        空行
        响应体

5. 网络进程将收到的文件传递给渲染进程。

        （1）解析html构建DOM树
        （2）解析css构建CSSOM树
        （3）加载或执行js代码（在解析html的时候遇到script标签会发起请求，通常情况会阻塞之后的解析，但是使用defer、async异步加载则不会；defer是先加载，等DOM、CSSOM构建完后执行，async异步加载完立即执行）
        （4）二者合并构成渲染树，删掉display:none的节点
        （5）根据渲染树计算元素的布局、尺寸，构建布局树，（第一次确定叫布局，第二次叫回流）
        （6）构建图层树

6. GPU进程对页面渲染，呈现给用户

        如果，用户修改了DOM布局（比如宽、高、大小），浏览器会进行回流（重排）：重新计算元素的尺寸、位置和样式，重新构建布局树

        如果修改了DOM外观，那么会进行重绘：不影响布局，重新构建图层树，把图片交给GPU进程渲染。

        回流一定引起重绘，重绘不一定回流。

7. 关闭TCP连接

        客户点申请断开连接FIN包
        服务端收到请求，并告知客户端收到ACK，但是服务端的数据没发完，服务端会继续发送
        发送完成，服务端发送FIN包，我这边同意断开连接了
        客户端收到，发送ACK包，正式断开连接

因为TCP是全双工的通信，如果三次挥手的话，会导致一方认为连接没有断开，继续等待数据，浪费资源。

HTTP缓存

http缓存方式有两种：强缓存和协商缓存。

强缓存

强缓存是指：服务器在响应头中添加字段，表明浏览器缓存中该资源有效时间。之后在请求相同资源时，浏览器先检查缓存是否有效，有效则命中强缓存，直接使用缓存中的资源，http状态状态码为 200 (from cache)，不用发请求到服务器。

响应头中添加字段的两种方式：

 http响应头中设置Expires（绝对时间）或者Cache-control（相对时间），设置资源的缓存时间。

Expires当浏览器和服务器时间不同步，用户改了客户端本地的时间，就无法读取缓存，所以出现了Cache-control

协商缓存

如果没有命中强缓存，那么发请求到服务器.浏览器携带上询问字段（缓存资源是否有效），服务器在响应头中携带上对应的字段，并判断和浏览器请求头字段是否相同，相同，协商缓存命中，http状态码304，告诉浏览器可以从缓存里面取。

协商缓存添加字段的两种方式：

Last-Modify/if-modify-since

        服务器响应头携带Last-Modify表示最后一次修改资源的时间。第二次请求时在请求头携带if-modify-since，，如果第二次请求的响应头和请求头两个字段相等那么就命中

        但是时间嘛，精度不够，所以出现了etag

etag/if-none-match

        etag返回的是一个校验码，资源变化，导致etag变

如果两个都没有命中，就需要发请求加载资源，并更新缓存。

http缓存资源可以不用重复请求，提高服务器的并发性能，减少服务器的压力

跨页面应用数据传递方法

1. localStorage

        在其中一个标签页使用localStorage.setItem，另一个标签页监听storage事件event.key, event.value

2. cookie+setInterval()——保证两个页面满足同源策略

        在A页面将需要的数据传递给cookie中docuemnt.cookie。在B页面设置setInterval，过一段时间读取cookie。

3. websocket

两个页面借助服务器，服务器再主动向别的页面发送数据。页面监听websocket的message事件，从过获取服务端发送来的数据

HTTP1.1 vs HTTP2

HTTP1. 0

特点：

1. 不支持长连接，也就是说，每发一次请求，就需要进行TCP连接。所以很有可能一个html文件，就需要多次建立连接、断开连接的操作
2. 设置connection:keep-alive实现长连接，但是队头阻塞：下一个请求需要在第一个请求的结果回来之后发送。
3. 缓存：expires  IF-modified-since/last-modify
4. 不支持断点续传：想要部分数据，服务器也会把全部数据给你，浪费带宽

HTTP1.1

特点：

1. 默认支持长连接，请求头connection: keep-alive；
2. 管道传输：允许客户端发送多个请求，不需要等待上一个请求的结果响应就可以发送下一个请求。但是服务端要按照客户端请求的顺序将数据响应。如果A请求耗时较长，后续响应也会阻塞
3. 引入新的缓存策略（其他两种）
4. 引入range，允许客户端请求资源的某部分
5. 添加了请求方法：PUT DELETE options...
6. 报文采用纯文本方式简单易读

HTTP2

1. 多路复用：客户端和浏览器都可以同时请求和响应，服务端不需要按照顺序，因为每次请求会有一个独一无二的编号，解决了队头阻塞的问题。
2. 二进制格式传输数据：速度加快
3. 首部压缩。第一次请求携带了所有的头部i西南西，第二次只需要发送差异字段即可
4. 服务器推送：就比如请求的资源是html，服务器还会发送html需要的资源，像css等
5. 基于HTTPS：HTTP1.X使用明文传输，所以2更安全

HTTP VS HTTPS

HTTPS更安全，其实是在TCP三次握手后，又进行了一次TSL/SS连接，确定加密密钥。步骤如下
        1. 客户端发送hello+自己支持的TSL版本+加密算法+第一个随机数到服务器
        2. 服务器像客户端发送选择的TSL版本+加密算法+第二个随机数+SSL证书+公钥
        3. 客户端收到后生成第三个随机数（预主密钥，用公钥加密传给服务器）
        4. 服务器使用私钥解密
        5. 双方把三个随机数结合生成加密密钥，使用加密密钥传输数据

注意：前4步都是非对称加密；生成加密密钥后，后面传输时用的就是对称加密传输。（混合加密）

TCP和UDP

二者都是传输层的协议，主要区别在于：

1. 速度方面：UDP快于TCP，因为TCP还需要建立连接才可以发送数据。而UDP不需要，对于发送方，将应用层的数据携带首部就发送；对于接收方去除首部，就交给应用层，完成任务

2. 稳定可靠性：TCP是稳定可靠的连接，可以保证数据的不重复、不丢失、不失序。而UDP是面向无连接的协议，并不保证数据的可靠性。且TCP还拥有重传机制，即当有数据客户端没有收到时，即没有发送ACK包，服务端会重新进行发送。

3. 由于TCP要建立连接，所以是一对一的服务，而UDP可以一对多、多对多。

3. 除此之外，TCP为了保证可靠传输，还有拥塞控制和流量控制。

        流量控制指的是，接收端处理数据的速度有限，发送方发送的太快，缓存区会被占满，此时如果继续发送就会造成丢包，TCP中流量控制采用滑动窗口来实现（解决收发方速度不匹配问题）
        拥塞控制是指发送方可以连续发送大量的数据包。TCP使用慢启动的方式实现，即由少到多的发送数据。（解决网络资源被耗尽的问题）。

GET和POST区别

1. 用途：GET用于请求数据，POST用于提交数据
2. 参数位置：GET请求参数体现在url上，且只接受ASCII字符，POST请求数据在请求体中放着，写数据类型没有限制
3. url参数有长度限制，POST没有
4. 安全性：GET参数可以看到，POST看不到，所以post较为安全
5. 数据包：GET是简单请求，POST是复杂请求（需要先发送options请求）

Websocket

是在HTTP协议的一个扩展。也是采用TCP连接，而http只能实现客户端发送请求，服务端响应，而Websocket实现了服务器主动向客户端发送消息。

当客户端想要使用ws协议传输数据时，就需要在请求头中携带Conection: Upgrade; Upgrade:websocket，服务端响应头也携带同样的，双方就可以使用ws协议通信。

使用场景：媒体聊天，弹幕，股票数据走势等等实时性较强的应用。