2021.7.22 HTTP网络通信及优化指南-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44014425/article/details/118976970

本文详细阐述了从输入URL到页面渲染的整个过程，包括URL解析、缓存检查、DNS解析、TCP三次握手和四次挥手。重点讨论了HTTP缓存机制，如强缓存和协商缓存，以及性能优化策略，如利用Last-Modified和ETag减少数据传输，以及DNS预解析和TCP连接复用。最后提到了网络优化的重要性，如减少HTTP请求次数、数据压缩和CDN使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

URL解析
缓存检查
DNS解析
TCP的三次握手
HTTP传输
TCP的四次挥手
渲染页面

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.youkuaiyun.com/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 长连接，在一定时间内，如果建立连接之后，可以保证连接通道不关闭，这样可以提高传输效率

性能优化汇总

利用缓存

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

DNS优化

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

TCP的三次握手和四次挥手

Connection: keep-alive

数据传输

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