2021.7.22 HTTP网络通信及优化指南

从输入URL到看到页面“CRP关键节点的性能优化【HTTP网络层面】

浏览器一共进行七个步骤：

1. URL解析
2. 缓存检查
3. DNS解析
4. TCP的三次握手
5. HTTP传输
6. TCP的四次挥手
7. 渲染页面

URL解析

• 传输协议：HTTP / HTTPS(SSL) / FTP(文件上传）…
• 域名：顶级、一级、二级…
• 端口号：0~65535 区分同一台服务器上的不同服务 [默认端口号：HTTP: 80 HTTPS: 443 FTP: 21] 默认端口号是浏览器处理的
• 问号参数：可以把一些信息传递给服务器“get系列”；也可以实现两个页面之间的信息通信；SPA单页面中，实现组件和组件之间的通信；…
• HASH哈希值：锚点定位；HASH路由；…

编码问题：URL中特殊内容的编码

• encodeURI decodeURI 编译能力弱，只是把URL地址中的中文或者空格等编译 “用于整个URL的编译”
• encodeURIComponent decodeURIComponent 编译能力强，还可以多编译一些特殊符号“用于传递参数的某个值编译”
• escape unescape 只适合客户端之间的通信和编码

axios.get(`http://www.xxx.com/api/list?name=${encodeURIComponent('雪之下雪乃')}&from=${encodeURIComponent('http://www.weixin.com/')}&lx=1`);

缓存检查

缓存检查针对静态资源文件，例如：html/css/js/图片…
缓存位置：内存、硬盘
F5普通刷新：TAB页卡没关闭，先检测内存，再检测硬盘是否有缓存
重新打开页面：直接检测硬盘中是否有缓存
CTRL + F5强制刷新：不检测任何缓存，直接向服务器发送请求

• 强缓存

  1. 先检测本地是否有强缓存，如果有且没过期，直接从本地获取，然后渲染【HTTP状态码：200】
  2. 如果没有或过期了，则重新向服务器发送请求，拉取回最新的结果，渲染的同时，把本次结果缓存起来
     优势：性能优化的重要手段，可以保证第二次及以后再访问产品，速度会很快
     弊端：可能无法保证本地获取的资源是最新的
     如何解决弊端？
  • HTML是不能做强缓存的
  • 只要HTML不处理强缓存，我们就可以保证其余资源的及时更新：请求资源后面设置时间戳，或者文件名字根据内容生成HASH名
  • 服务器设置的强缓存：在每一次重新从服务器拉取最新资源文件的时候，都在响应头中携带 Cache-Control/Expires “缓存有效期”，以后再访问这些资源，就可以看看本地是否有，以及是否过期了

• 协商缓存304 【只有强缓存失效后，才会校验协商缓存】

  1. 如果啥缓存都没有，直接从服务器获取最新的资源信息“把信息缓存起来；强缓存：把 Cache-Control/Expires 存储起来；协商缓存：把 Last-Modified/ETag 存储起来”
     Last-Modified：当前资源文件再服务器端最后修改的时间
     ETag：每一次修改文件都会生成一个标志

  2. 再次请求这个页面，如果强缓存不生效，则开始协商缓存

     • 向服务器发送请求，同时带上 if-Modified-Since:Last-Modified 或者if-None-Match:ETag 传递给服务器；服务器根据传递的时间/标志，和服务器本身资源文件最后修改的时间/标志，进行对比，如果一样，说明文件没有更新过，直接返回304即可，无需返回内容；如果不一样，说明更新过，那么则返回最新的内容和最新的 Last-Modified/ETag
     • 接收的是304，直接从本地缓存中获取信息渲染即可
       HTML文件资源是可以使用协商缓存的

     一、 什么是”Last-Modified”?
     在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记此文件在服务期端最后被修改的时间，格式类似这样：
     Last-Modified: Fri, 12 May 2006 18:53:33 GMT

     客户端第二次请求此URL时，根据 HTTP 协议的规定，浏览器会向服务器传送 If-Modified-Since 报头，询问该时间之后文件是否有被修改过：
     If-Modified-Since: Fri, 12 May 2006 18:53:33 GMT

     如果服务器端的资源没有变化，则自动返回 HTTP 304 （Not Changed.）状态码，内容为空，这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时，则重新发出资源，返回和第一次请求时类似。从而 保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。

     二、 什么是”Etag”?
     HTTP 协议规格说明定义ETag为“被请求变量的实体值” （参见 —— 章节 14.19）。 另一种说法是，ETag是一个可以与Web资源关联的记号（token）。典型的Web资源可以一个Web页，但也可能是JSON或XML文档。服务器单 独负责判断记号是什么及其含义，并在HTTP响应头中将其传送到客户端，以下是服务器端返回的格式：
     ETag: "50b1c1d4f775c61:df3"

     客端的查询更新格式是这样的：
     If-None-Match: W/"50b1c1d4f775c61:df3"
     如果ETag没改变，则返回状态304然后不返回，这也和Last-Modified一样。Etag主要在断点下载时比较有用。

     Last-Modified和Etags如何帮助提高性能?
     聪明的开发者会把Last-Modified 和ETags请求的http报头一起使用，这样可利用客户端（例如浏览器）的缓存。
     因为服务器首先产生 Last-Modified/Etag标记，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客 户端）缓存。

     过程如下:
     1. 客户端请求一个页面（A）。
     2. 服务器返回页面A，并在给A加上一个Last-Modified/ETag。
     3. 客户端展现该页面，并将页面连同Last-Modified/ETag一起缓存。
     4. 客户再次请求页面A，并将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器。
     5. 服务器检查该Last-Modified或ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304和一个空的响应体。

     注：以上内容转载自 tianmo2010的博客《Last-Modified 与 If-Modified-Since详解》https://blog.csdn.net/tianmohust/article/details/8840256

• 数据缓存【AJAX/FETCH…】

DNS解析【域名解析】

在DNS服务器上，基于域名找到服务器的外网IP，后面我们就可以基于服务器的外网IP找到服务器了
DNS解析也有缓存

• 从本地缓存中找时用的是递归查询
• 从DNS服务器上查找时用的时迭代查找
  一次DNS解析大概20ms~120ms之间
  服务器拆分优势：
• 资源的合理利用
• 抗压能力加强
• 提高HTTP并发

TCP三次握手

在拿到外网IP后，我们开始建立客户端和服务器端连接的通道“TCP通道”

• TCP：稳定的网络通信协议【图稳定】
• UDP：不稳定的网络通信协议【图个快，例如音视频的传输】
  TCP作为一种可靠传输控制协议，其核心思想：既要保证数据可靠传输，又要提高效率
  数据传输
  HTTP报文
• 请求报文
• 响应报文

TCP四次挥手

断开TCP连接通道

• connection：keep-alive 长连接，在一定时间内，如果建立连接之后，可以保证连接通道不关闭，这样可以提高传输效率

性能优化汇总

1. 利用缓存

• 对于静态资源文件实现强缓存和协商缓存（扩展：文件有更新，如何保证及时刷新？）
• 对于不经常更新的接口数据采用本地存储做数据缓存（扩展：cookie/localStorage/vuex|redux 区别？）

2. DNS优化

• 分服务器部署，增加HTTP并发性（导致DNS解析变慢）
• DNS Prefetch（预先载入）

3. TCP的三次握手和四次挥手

• Connection: keep-alive

4. 数据传输

• 减少数据传输的大小
  • 内容或者数据压缩（webpack等）
  • 服务器端一定要开启GZIP压缩（一般能压缩60%左右）
  • 大批量数据分批次请求（例如：下拉刷新或者分页，保证首次加载请求数据少）
• 减少HTTP请求的次数
  • 资源文件合并处理
  • 字体图标
  • 雪碧图 CSS-Sprit
  • 图片的BASE64
    +…

5. CDN服务器“地域分布式”
6. 采用HTTP2.0

---

网络优化是前端性能优化中的重点内容，因为大部分的消耗都发生在网络层，尤其是第一次页面加载，如何减少等待时间很重要“减少白屏的效果和时间“

• LOADING 人性化体验
• 骨架屏：客户端骨屏 + 服务器骨架屏
• 图片延迟加载
• …