哈喽，大家好，今天的文章由uncle13提供。

在日常项目开发中，处理用户交互和数据获取是前端开发中最常见的问题。这种场景下，一个页面可能同时触发了数百个请求，这些请求可能是异步的，也可能是同步的。当一个页面同时发出如此多的请求时，如何有效地管理和优化这些请求变得至关重要。在前端面试中也比较常见这样的场景面试题：一个页面同时发出百条请求时怎么办？

问题

• 性能问题：大量的请求会占用大量的网络资源，可能导致页面加载速度变慢，影响用户体验。
• 服务器压力：服务器需要处理大量的请求，可能导致服务器负载过高，甚至崩溃。
• 数据冲突和一致性问题：如果多个请求同时修改同一份数据，可能导致数据冲突和不一致。

解决方案

1. 批量请求和数据合并

批量请求：

在发送批量请求时，前端可以将多个独立的请求合并为一个请求发送给后端，通常使用类似于RESTful API的方式。这样一来，每个请求的开销（例如建立连接、传输等）只需发生一次，从而降低了整体的网络负载，提高了性能。

数据合并：

当后端接收到批量请求后，可以根据前端发送的请求进行数据合并。在后端领域中，可以使用类似于GraphQL这样的查询语言，或者自定义API端点来处理并返回所需的数据集合。

假设一个社交媒体平台上的页面需要同时获取当前用户关注的100位用户的最新动态。如果不使用批量请求和数据合并，页面可能会发出100条单独的请求来获取每个用户的动态信息，导致大量的网络开销和响应时间延长。

现在有这样的需求：需要获取当前用户关注的10位用户的最新动态。

// 模拟前端发送批量请求的函数
async function batchRequest(userIds) {
  let promises = userIds.map(userId => {
    return fetch(`https://api.example.com/user/${userId}/posts`)
      .then(response => response.json());
  });

  let results = await Promise.all(promises);
  return results;
}

// 模拟后端处理数据的函数
function mergeData(postsArray) {
  // 在这个示例中，我们简单地将所有用户的动态信息合并成一个数组返回
  return postsArray.flat();
}

// 主程序
(async () => {
  let currentUser = 'example_user';
  let followingUsers = ['user1', 'user2', 'user3', 'user4', 'user5', 'user6', 'user7', 'user8', 'user9', 'user10'];

  try {
    // 发送批量请求
    let posts = await batchRequest(followingUsers);

    // 后端数据合并
    let mergedData = mergeData(posts);

    console.log(mergedData);
  } catch (error) {
    console.error('Error fetching and merging data:', error);
  }
})();

在上述代码中，batchRequest函数模拟了前端发送批量请求的过程，它使用fetch API从后端获取每位用户的动态信息。接着，Promise.all用于等待所有请求完成后返回结果。

接着，在mergeData函数中模拟了后端处理数据的步骤。在真实场景中，后端可能会根据具体需求对数据进行更复杂的操作和合并，比如对数据进行筛选、排序或其他处理。

2. 请求优先级和延迟加载

请求优先级：

在处理多个请求时，可以根据请求的重要性和紧急程度为它们设置优先级，以确保重要内容能够优先加载，从而提高用户感知的加载速度。

考虑一个新闻网站的首页，该页面可能包含大量动态内容，比如热门新闻、推荐文章和广告等。在这种情况下，可以将一部分内容延迟加载，例如将广告或某些推荐文章放置在用户滚动到页面底部时才加载，而不是在页面初始加载时就全部请求和展示。

// 模拟设置请求优先级和延迟加载

// 设置请求优先级
let loadImportantContent = async () => {
  // 加载重要内容，比如商品信息
  await fetch('important_content_url');
  // 更新页面显示重要内容
};

let loadSecondaryContent = async () => {
  // 加载次要内容，比如用户评价
  await fetch('secondary_content_url');
  // 更新页面显示次要内容
};

// 延迟加载
document.addEventListener('scroll', function() {
  if (window.scrollY + window.innerHeight >= document.documentElement.offsetHeight) {
    // 当用户滚动到页面底部时再加载延迟内容，比如广告
    fetch('delayed_content_url')
      .then(response => response.json())
      .then(data => {
        // 更新页面显示延迟加载的内容
      });
  }
});

在上述示例中，我们使用了JavaScript模拟了设置请求优先级和延迟加载的过程。使用fetch API来模拟发送请求，并在相应的事件中更新页面显示的内容。通过这种方式，我们可以实现根据请求的优先级和延迟加载策略来优化页面性能，提升用户体验。

3. 缓存策略

缓存策略的种类：

1. 浏览器缓存： 浏览器通过HTTP标头中的Cache-Control、Expires等字段来决定是否缓存资源，以及缓存的过期时间和重新验证机制。
2. 服务端缓存： 服务器端通过设置响应头中的ETag、Last-Modified等字段来控制客户端缓存的过期和重新验证逻辑。
3. 本地缓存： 前端可以使用localStorage、sessionStorage或IndexedDB等技术自行管理部分数据的缓存，以减少对后端的请求。

缓存策略的具体应用：

1. 静态资源缓存： 对于网站的静态资源（如样式表、脚本文件、图片等），可以通过设置合适的Cache-Control和Expires标头来告知浏览器长时间缓存这些资源，减少不必要的网络请求。
2. 数据接口缓存： 对于频繁请求的数据接口，可以通过在服务器端设置适当的缓存策略（如HTTP响应头中的Cache-Control和ETag）来减少对后端系统的压力，提高数据的获取速度。
3. 页面级缓存： 对于整个页面内容的缓存，可以利用浏览器缓存和服务端缓存来缓存完整的页面输出，从而加速页面加载速度。

在Node.js环境下设置不同类型的缓存策略：

// 设置静态资源缓存策略
app.use((req, res, next) => {
  // 设置静态资源的缓存时效为30天
  res.setHeader('Cache-Control', 'public, max-age=2592000');
  next();
});

// 设置数据接口缓存策略
app.get('/api/data', (req, res) => {
  // 设置响应头中的ETag和Cache-Control字段
  const data = fetchDataFromDatabase();
  res.setHeader('ETag', generateETag(data));
  res.setHeader('Cache-Control', 'public, max-age=3600');
  res.json(data);
});

// 设置页面级缓存策略
app.get('/home', (req, res) => {
  // 从缓存中获取页面内容，如果不存在则生成页面并缓存
  const cachedPage = cache.get('home_page');
  if (cachedPage) {
    res.send(cachedPage);
  } else {
    const pageContent = renderHomePage();
    cache.set('home_page', pageContent, 3600); // 缓存一小时
    res.send(pageContent);
  }
});

以上是解决当一个页面需要同时发出大量请求时，前端开发人员可以采取以上措施来管理和优化这些请求，以提高页面性能和用户体验。根据具体项目的情况，采用批量请求、请求优先级、延迟加载和缓存策略等方法，可以有效的解决这些问题。