页面上有100个请求发送，突然切换页面，前端该怎么优化？

创作时间:

作者:

@小白创作中心

页面上有100个请求发送，突然切换页面，前端该怎么优化？

引用

CSDN

https://blog.csdn.net/mayuhao0000/article/details/143686489

在前端开发中，当一个页面需要发送大量请求时，如何优化性能是一个值得深入探讨的问题。本文从实际场景出发，详细分析了如何通过优化请求和交互来提升用户体验，为前端开发者提供了实用的解决方案。

背景

最近，一位小伙伴在面试时被问到了这样一个问题：当页面上有100个请求发送时，突然切换页面，前端该如何优化？乍一看，这似乎是一个伪命题，因为正常情况下很少会有如此多的请求。但在某些特殊场景下，这种情况确实可能发生，而且随着Web端需求的日益复杂，这种需求也变得越来越常见。

实际会出现吗

在正常的设计中，产品经理通常会注重功能解耦，后端也不会轻易提供过多的接口。但在某些特殊场景下，例如低代码平台的自定义首页，确实可能出现大量请求的情况。以某公司产品的首页为例，配置了16个组件，再加上一些其他接口，如国际化、业务配置等，总共需要58个接口。即使在良好的网络环境下，完成所有请求也需要3.47秒，在这段时间内切换页面是完全可能的。

该怎么优化

要优化这个问题，首先需要明确优化的目标。是为了解决服务器压力问题，还是提升用户体验，或者是处理突然切换页面时未完成的请求。根据这些目标，可以从两个方向进行优化：优化请求和优化交互。

优化请求

使用Promise.all()、Promise.race()或Promise.allSettled()来控制异步任务
实现组件和图片的懒加载，优先处理视口内的元素
引入缓存机制，减少不必要的请求
升级到HTTP2.0/3.0，利用底层优化提高请求效率
使用WebSocket，在需要实时性的场景中减少HTTP请求
使用WebWorker创建多线程环境，减轻主线程负担
合并请求，从源头上减少接口数量

优化交互

如何知道接口有没有完成

可以定义一个请求队列，使用Vuex或Pinia等状态管理工具来管理请求状态。每个请求使用唯一标识（如UUID）进行区分，并在请求开始和结束时进行入队和出队操作。

// 定义一个请求队列
const axiosQueue = [];

// 将axios实例加入请求队列
const enQueue = (id, axiosInstance) => {
    axiosQueue.push({
        id,
        axiosInstance
    });
};

// 出队
const deQueue = () => {
    axiosQueue.shift();
};

// 批量出队
const deQueueMuti = (ids) => {
    const idsArr = ids.split(',');
    axiosQueue.filter(item => idsArr.includes(item.id));
};

// 执行请求队列
const runQueue = () => {
    axiosQueue.forEach(item => {
        doAxios(item.axiosInstance);
    });
};