第七篇 提升网页性能：深入解析HTTP请求优化策略（二）

深入浅出HTTP请求前后端交互系列专题
第一章 引言-HTTP协议基础概念和前后端分离架构请求交互概述
第二章 HTTP请求方法、状态码详解与缓存机制解析
第三章 前端发起HTTP请求
第四章 前后端数据交换格式详解
第五章 跨域资源共享（CORS）：现代Web开发中的关键机制
第六篇 提升网页性能：深入解析HTTP请求优化策略（一）
第七篇 提升网页性能：深入解析HTTP请求优化策略（二）
第八篇 提升网页性能：深入解析HTTP请求优化策略（三）
第九篇 API设计原则与最佳实践
第十篇 Axios最佳实战：前端HTTP通信的王者之选
第十一篇 前沿趋势与展望：深入探索GraphQL、RESTful API、WebSocket、SSE及QUIC与HTTP/3

文章目录

HTTP请求优化是提高Web应用性能和用户体验的关键环节，异步请求队列管理和请求取消是其中的两个重要策略。以下是对这两个技术的详细介绍：

1 异步请求队列管理

在高并发或需要处理大量HTTP请求的情况下，同步处理会导致服务器响应时间增加，因为每个请求都需要等待前一个请求完成才能开始处理。异步请求队列管理则通过将HTTP请求放入队列中，并由后台线程池异步执行这些请求来改善这一问题。

1.1 工作原理

  • 当接收到HTTP请求时，服务器不是立即处理该请求，而是将其包装成任务单元（如Callable或Runnable对象），然后将其添加到一个优先级队列、FIFO队列或其他逻辑结构中。
  • 一个独立的线程池负责从队列中取出任务进行处理，这样可以保证多个请求可以并行执行，而不是串行排队等待。
  • 在客户端层面，可以通过JavaScript异步API（例如Fetch API或者Ajax）发送异步请求，浏览器不会阻塞主线程等待响应。
    异步请求队列管理是一种优化HTTP请求发送策略，通过将多个请求放入一个有序或优先级队列中，并按一定顺序或规则异步执行这些请求，从而避免同时发起大量请求导致服务器压力过大、网络阻塞等问题。以下是更详细的说明和示例：

过程实现

  1. 请求排队：当应用程序需要发起多个HTTP请求时，不是立即发出所有请求，而是先将请求信息（如URL、请求参数等）存入到一个队列结构中。

  2. 异步处理：使用线程池、Promise链、async/await 或者其他异步编程机制，从队列中取出请求并进行异步发送。队列中的下一个请求只有在当前请求完成或达到特定条件（如并发数限制）时才会开始发送。

// 假设我们有一个异步发送HTTP请求的方法fetchAsync
function fetchAsync(url) {
  return new Promise((resolve, reject) => {
    // 实际发送请求逻辑...
  });
}

// 请求队列类
class AsyncRequestQueue {
  constructor(maxConcurrent = 5) {
    this.queue = [];
    this.concurrentRequests = 0;
    this.maxConcurrent = maxConcurrent;
  }

  enqueue(requestInfo) {
    this.queue.push(requestInfo);
    this.processQueue();
  }

  processQueue() {
    if (this.concurrentRequests < this.maxConcurrent && this.queue.length > 0) {
      const requestInfo = this.queue.shift();
      this.concurrentRequests++;
      
      fetchAsync(requestInfo.url)
        .then(response => {
          // 处理响应...
          this.concurrentRequests--;
          this.processQueue();
        })
        .catch(error => {
          // 处理错误...
          this.concurrentRequests--;
          this.processQueue();
        });
    }
  }
}

// 使用示例
const queue = new AsyncRequestQueue(3);

const urls = ['url1', 'url2', 'url3', 'url4', 'url5'];
urls.forEach(url => queue.enqueue({ url }));
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

在这个例子中，AsyncRequestQueue 类负责维护一个请求队列，并且最多同时发送3个请求。每当有新的请求被加入队列，都会尝试启动一个新的请求。当请求完成或遇到错误时，调用 processQueue 方法来检查是否有待处理的请求。

需要注意的是，上述代码仅为示例简化版，实际应用中可能还需要考虑更多的细节，如错误处理、优先级排序以及如何与具体HTTP客户端库集成等。

  1. 并发控制：可以设定并发请求的数量上限，比如只允许同时处理5个请求，超出的请求会等待前面的请求完成后再执行。这样能够有效避免因短时间内发起过多请求对服务器造成过载。

在Java Spring Boot中，我们可以使用ThreadPoolTaskExecutor来创建一个线程池执行器，并通过配置其核心线程数、最大线程数和队列大小来限制并发请求的数量。以下是一个基于Spring Boot的示例：

首先，在配置类（如AsyncConfig.java）中定义并配置ThreadPoolTaskExecutor：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.scheduling.concurrent.ThreadPoolTaskExecutor;

@Configuration
public class AsyncConfig {

    @Bean(name = "asyncExecutor")
    public ThreadPoolTaskExecutor threadPoolTaskExecutor() {
        ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor();
        // 核心线程数
        executor.setCorePoolSize(5);
        // 最大线程数，这里与核心线程数相同，意味着超出核心线程数量的请求将进入队列等待
        executor.setMaxPoolSize(5);
        // 队列容量，当活跃线程数达到最大时，新的任务将在队列中等待，如果队列满了则根据拒绝策略处理
        executor.setQueueCapacity(Integer.MAX_VALUE); // 或设置为适当的值，例如：100
        // 线程前缀名
        executor.setThreadNamePrefix("Async-");
        // 初始化
        executor.initialize();
        
        return executor;
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

接下来，在需要异步处理HTTP请求的地方，使用@Async注解标记方法，并注入我们创建的asyncExecutor：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.Async;
import org.springframework.stereotype.Service;

@Service
public class MyService {

    @Autowired
    private AsyncConfig.AsyncExecutor asyncExecutor;

    @Async("asyncExecutor") // 使用我们自定义的线程池执行器
    public void handleHttpRequest(String url) {
        // 发送HTTP请求的逻辑...
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在这个配置下，任何时候最多只有5个HTTP请求会并发执行。当超过5个请求到来时，新来的请求会被放入到线程池的任务队列中，等待有空闲线程时再进行处理。

注意：实际应用中可能还需要根据业务需求调整线程池参数以及考虑超时、拒绝策略等问题。同时，上述代码中的队列容量设为了Integer.MAX_VALUE，这会导致所有无法立即执行的请求都被保存在内存队列中，可能造成内存溢出。在真实场景中，通常会设置合理的队列容量以限制未处理请求的数量。

  1. 优先级管理：根据业务需求，为队列中的请求分配优先级，优先级高的请求会被提前处理。例如，重要的用户交互操作可能比背景数据更新有更高的优先级。

在前端实现一个请求队列并为其中的请求分配优先级，可以使用JavaScript结合Promise和优先队列（Priority Queue）的数据结构。以下是一个基于Promise和自定义优先队列实现的简要示例：

// 定义一个基于Promise的异步HTTP请求函数（这里仅作模拟）
function sendAsyncRequest(url, priority) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`Sending request to ${url} with priority ${priority}`);
      resolve({ url, priority });
    }, Math.random() * 1000); // 模拟随机延迟
  });
}

// 创建一个优先队列类
class PriorityQueue {
  constructor() {
    this.queue = [];
  }

  enqueue(requestInfo) {
    let inserted = false;
    for (let i = 0; i < this.queue.length; i++) {
      if (requestInfo.priority > this.queue[i].priority) {
        this.queue.splice(i, 0, requestInfo);
        inserted = true;
        break;
      }
    }
    if (!inserted) {
      this.queue.push(requestInfo);
    }
  }

  dequeue() {
    return this.queue.shift();
  }

  isEmpty() {
    return this.queue.length === 0;
  }
}

// 请求队列管理器
class RequestQueueManager {
  constructor() {
    this.requestQueue = new PriorityQueue();
    this.isProcessing = false;
  }

  addRequest(url, priority) {
    const requestInfo = { url, priority };
    this.requestQueue.enqueue(requestInfo);
    this.processNextRequest();
  }

  async processNextRequest() {
    if (this.isProcessing || this.requestQueue.isEmpty()) return;

    this.isProcessing = true;
    const currentRequest = this.requestQueue.dequeue();

    try {
      const response = await sendAsyncRequest(currentRequest.url, currentRequest.priority);
      console.log('Received response:', response);
      // 在这里处理响应...
    } catch (error) {
      console.error('Error processing request:', error);
    } finally {
      this.isProcessing = false;
      this.processNextRequest();
    }
  }
}

// 使用示例
const queueManager = new RequestQueueManager();

queueManager.addRequest('/api/important-action', 2);
queueManager.addRequest('/api/background-update', 1);
queueManager.addRequest('/api/critical-action', 3);

// 这里的逻辑会确保优先级高的请求先被处理
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79

在这个例子中，PriorityQueue 类用于维护带有优先级的请求队列，而 RequestQueueManager 类负责从队列中取出优先级最高的请求进行发送，并在请求完成后继续处理下一个请求。这里的 sendAsyncRequest 函数是模拟实际发起HTTP请求的异步操作，实际应用中应替换为具体的网络请求库（如axios、fetch等）。

1.2 优点

  • 提高系统吞吐量：允许服务器同时处理多个请求，而非一次一个。
  • 减少延迟：用户无需等待单一请求完成，能够更快地得到初步反馈。
  • 资源利用优化：根据服务器资源动态调整队列大小和线程池规模，避免资源浪费或过度使用。

1.3 示例

  • Node.js中的Event Loop机制天然支持非阻塞I/O，异步操作完成后会回调函数。
  • Java中可以结合ExecutorService和Future来实现异步请求处理。
  • PHP中可以结合消息队列服务如RabbitMQ，实现请求的异步解耦与批量处理。

2 请求取消

请求取消是指当客户端不再需要某个HTTP请求的结果时，能够主动发出信号通知服务器停止对这个请求的处理。

2.1. 工作原理

  • 客户端发起请求后，通常会获得一个表示该请求的对象，该对象可提供取消功能，如axios库在JavaScript中的cancelToken，或者是Java Future.cancel()方法等。
  • 当客户端调用取消方法时，会发送一个信号给服务器，告知它可以安全地终止相关请求的处理。
  • 服务器应当设计为能够识别并响应这样的取消请求，释放已分配的资源（如数据库连接、网络IO等）。

2.2 优点

  • 资源回收：及时取消无用请求有助于减少服务器负担，尤其在长耗时操作或用户已经离开页面的情况。
  • 用户体验：用户交互过程中，可能因需求变化而需取消正在加载的内容，及时取消能避免不必要的数据传输。

2.3 实施细节

  • 对于HTTP/1.1协议本身不直接支持请求取消，但在HTTP/2协议中引入了Stream ID和流控制的概念，可以更方便地管理请求的生命周期和取消请求。
  • 实现请求取消往往需要应用程序层的支持，比如在服务器端记录请求ID并在接收到取消信号时关闭对应的处理流程。

2.4 axios取消请求

在使用axios库进行HTTP请求时，如果需要取消一个或多个正在进行的请求，可以利用axios提供的CancelToken机制。以下是如何创建和使用CancelToken来取消请求的步骤：

  1. 创建CancelToken源（source）：
import axios from 'axios';

// 创建一个新的CancelToken源
const source = axios.CancelToken.source();
  • 1
  • 2
  • 3
  • 4
  1. 在发送请求时指定CancelToken：
axios.get('/api/data', {
  cancelToken: source.token // 将token传递给请求配置
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request cancelled:', error.message);
  } else {
    // 处理其他错误
  }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  1. 取消请求：
// 在需要取消请求的地方调用cancel方法
source.cancel('Operation canceled by the user.'); // 可以传入取消的原因信息
  • 1
  • 2
  1. 对于多个请求，每个请求都可以关联到不同的CancelToken源，然后根据需求分别取消。

通过这种方式，当调用了source.cancel()方法后，与该CancelToken关联的所有未完成的请求都会被取消，并在catch回调中捕获到带有axios.isCancel()判断为true的错误对象。这样就能够灵活地管理前端应用中的异步HTTP请求，特别是在用户离开页面或者需求改变时避免不必要的资源浪费。

2.5 fetch取消请求

在JavaScript中，AbortController 是一个内置的接口，用于发起可取消的异步操作，特别是针对网络请求（如Fetch API）。它与 AbortSignal 一起工作，提供了一种机制来通知一个或多个相关的异步任务应被提前取消。

当你创建一个新的 AbortController 实例时，会同时得到一个关联的 AbortSignal 对象。这个信号对象可以传递给支持取消功能的异步API（例如fetch、XMLHttpRequest等），当调用 AbortController 的 abort() 方法时，所有监听该信号的对象都会收到通知，并且可以据此停止正在进行的操作。

例如，在使用Fetch API时：

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request was aborted');
    } else {
      console.error('An error occurred:', error);
    }
  });

// 在某个时刻取消请求
controller.abort();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在这个例子中，如果在fetch请求完成之前调用 controller.abort()，那么fetch请求将会被取消，并抛出一个名为 “AbortError” 的错误。这样可以帮助开发者更好地管理资源和控制长时间运行或不再需要的结果。

综合运用异步请求队列管理和请求取消策略，不仅可以有效提升Web应用的性能和响应速度，还能更好地适应变化快速的用户场景，优化系统资源利用率。

衷心感谢您阅读至此，若您在本文中有所收获，恳请您不吝点赞、评论或分享，您的支持是我持续创作高质量内容的动力源泉。同时，也诚挚邀请您关注本博客，以便获取更多前端开发与设计相关的深度解析和实战技巧，我期待与您共同成长，一起探索前端世界的无限精彩！

注：本文转载自blog.csdn.net的极客岛的文章"https://blog.csdn.net/qq_32594913/article/details/135504355"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！