基于HTTP网络层的前端优化

协议：（客户端和服务器通信的协议，负责运送这些信息的）
- http：超文本传输协议，默认80端口，客户端和服务端传输字节流，富文本等除了文本以外的内容
- https：http基础上，SSL加密，安全，默认443端口
- ftp：用于文件上传下载，例如本地代码上传服务器
域名：
- 顶级域名：qq.com
- 一级域名：www.qq.com
- 二级域名: sports.qq.com
- 三级域名: kbs.sports.qq.com
端口号：
- 用来区分服务器上的不同服务，每个服务就是一个项目
- 端口号在 0~65535 之间
编码：
- URL：www.xxx.com?form=http://www.qq.com…
- 浏览器发现两个http会解析成两个网址，实际只是参数，所以需要加密参数
- encodeURI/decodeURI 编码/解码整个URL，处理URL中的中文
- encodeURIComponent/decodeURIComponent 编码/解码URL中问号传的参数信息
```
let str = `http://www.xxx.com?from=${encodeURIComponent('http://www.qq.com/?lx=xx')}`
// "http://www.xxx.com?from=http%3A%2F%2Fwww.qq.com%2F%3Flx%3Dxx"
```

浏览器对于强缓存的处理：根据第一次请求资源返回的响应头来确定的，服务器直接设置返回的
- Expires：缓存过期时间，用来指定资源的到期时间（HTTP/1.0）
- Cache-Control: Cache-Control: max-age=2592000第一次拿到哦资源后2592000秒内（30天），再次发送请求，读取缓存中的信息（HTTP/1.1）
- 两者同事存在的话，Cache-Control优先级高于Expires

本地没有缓存，从服务器拿，本地有缓存，和服务器无关了（只要本地缓存有，绝对不走服务器），html页面，一般不设置强缓存，防止服务器更新文件后，客户端获取的还是本地缓存中的页面，这样页面不能及时更新
一般 css js 图片设置强缓存
- 如果服务器有更新，首先页面没有做强缓存会更新，只要每次一有更新css，或者js，在请求的css和js后面设置一个时间戳，或者基于webpack只要资源文件有更新，生成不同文件名字的资源，用hash值替换文件名。

强缓存没有或者失效，才进行协商缓存
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发送请求，由服务器根据缓存标识决定是否使用缓存的过程
Last-Modified 存储服务器端当前资源文件最后一次修改的时间
ETag 存储根据当前资源的修改时间，生成的一个标识
If-Modifued-Since 存储上一次服务器返回的时间
If-None-Match 存储上一次返回的标识
服务器把获取的 If-Modifued-Since / If-None-Match 与最新的资源的标识 / 时间比较，相同返回304，直接读缓存，不一致，直接返回最新资源和标识

为什么连接三次握手，关闭四次握手
- 服务端收到客户端的SYN连接请求报文后，可以直接发送SYN+ACK报文
- 但是关闭连接时，当服务器端厚道FIN报文时，很可能并不会立即关闭链接，所以只能先回复一个ACK报文，告诉客户端，你的FIN我收到了，只有等到服务端所有的报文发送完，我才能发送FIN报文，因此不能一起发送，故需要四次挥手
http1.0时代，每次都TCP重新处理
http1.1时代，长连接，不断开，通过建立好的通道继续,Connection: keep-alive