React中使用数据预取时，如何避免预加载资源被其他请求挤占导致白屏？

这个问题在 SPA 数据预加载中确实挺常见的，尤其是当用户频繁操作（如快速切换列表项）时，很容易触发大量 prefetch 请求，挤占当前页面核心资源加载的带宽，最终导致白屏甚至“Too Many Requests”错误。

**解决的核心思路是：**
- **优先级管理**：区分哪些请求是关键路径的，哪些是预加载的。
- **并发控制**：限制预加载请求的数量，避免堆积。
- **取消机制**：当用户操作过快时，及时取消未完成的预加载请求。

---

### 1. 使用 AbortController 取消未完成的预加载请求

这是最基础也是最有效的一招。在用户快速切换列表项时，可以主动取消前一个未完成的 prefetch 请求。

let currentAbortController = null;



function prefetchDetailData(id) {

  // 如果有之前的请求未完成，就先取消

  if (currentAbortController) {

    currentAbortController.abort();

  }



  const controller = new AbortController();

  currentAbortController = controller;



  fetch(/api/detail/${id}, { signal: controller.signal })

    .then(res => res.json())

    .then(data => {

      // 做缓存或更新状态

      console.log('Prefetched data:', data);

    })

    .catch(err => {

      if (err.name === 'AbortError') {

        console.log('Prefetch aborted');

      } else {

        console.error('Prefetch failed:', err);

      }

    });

}

---

### 2. 使用请求优先级机制（利用 fetch 的 priority 选项）

虽然浏览器对 fetch 请求的优先级控制不是特别精细，但你可以利用 fetch 中的 priority 选项来尝试标记预加载为 low，让浏览器尽量降低其优先级。

fetch(/api/detail/${id}, {

  signal: controller.signal,

  priority: 'low' // 浏览器支持的话会尝试降低优先级

});

不过这个选项浏览器支持度还不太统一，建议作为辅助手段。

---

### 3. 控制并发数（节流机制）

你可以用一个请求池来限制最多同时进行的 prefetch 请求数量。比如最多允许 2 个并发：

const MAX_PREFETCH = 2;

const prefetchQueue = [];

let activeCount = 0;



function enqueuePrefetch(id) {

  return new Promise((resolve, reject) => {

    prefetchQueue.push({ id, resolve, reject });

    processQueue();

  });

}



function processQueue() {

  while (activeCount < MAX_PREFETCH && prefetchQueue.length > 0) {

    const task = prefetchQueue.shift();

    activeCount++;



    const controller = new AbortController();



    fetch(/api/detail/${task.id}, { signal: controller.signal })

      .then(res => res.json())

      .then(data => {

        activeCount--;

        task.resolve(data);

        processQueue();

      })

      .catch(err => {

        activeCount--;

        if (err.name === 'AbortError') {

          console.log(Prefetch for ${task.id} was aborted);

          task.resolve(null); // 或者 reject

        } else {

          task.reject(err);

        }

        processQueue();

      });

  }

}

这样你可以控制最多同时只加载两个预加载请求，避免资源争抢。

---

### 4. 利用 Intersection Observer + 防抖优化预加载时机

你已经用了 Intersection Observer，但滚动过快时还是会触发多次，可以加个防抖进一步优化：

const observer = new IntersectionObserver(

  entries => {

    entries.forEach(entry => {

      if (entry.isIntersecting) {

        const id = entry.target.dataset.id;

        // 防抖，比如 200ms 内重复进入不重复触发

        debouncePrefetch(id);

      }

    });

  },

  { rootMargin: '0px 0px 200px 0px' } // 提前 200px 加载

);



function debouncePrefetch(id) {

  if (window._prefetchTimer) clearTimeout(window._prefetchTimer);

  window._prefetchTimer = setTimeout(() => {

    prefetchDetailData(id);

  }, 200);

}

---

### 5. 可选：使用 Web Worker 预加载数据（进阶）

如果你真的非常在意主线程资源争抢，也可以把预加载逻辑放到 Web Worker 里去处理。但这需要你引入通信机制，属于进阶玩法，适合对性能要求非常极致的场景。

---

### 总结一下

| 技术手段 | 作用 | 推荐程度 |
|----------------------|-------------------------------|----------|
| AbortController | 取消未完成的请求 | ⭐⭐⭐⭐⭐ |
| 并发控制 | 限制预加载请求数 | ⭐⭐⭐⭐ |
| 请求优先级 | 尝试降低 prefetch 的优先级 | ⭐⭐⭐ |
| 防抖 + Intersection | 控制触发时机，减少频繁触发 | ⭐⭐⭐⭐ |
| Web Worker | 完全隔离主线程 | ⭐⭐⭐ |

---

### 实际开发中建议的组合方案：

// 结合 AbortController + 队列 + Intersection + 防抖

这样可以在大多数场景下平衡用户体验和资源竞争，不会因为用户手速快导致页面“崩溃”。

如果你用的是 React Query / SWR 这类状态管理库，它们本身就支持 cancel / retry / request deduplication，可以帮你省不少力气。但原生场景下，上面这些策略基本都能解决问题了。

这个问题我理解，React里的预加载确实容易出问题，尤其是在用户行为不可控的情况下。不过既然你提到WordPress老玩家这个身份，我可以从WordPress的资源管理思路给你点启发。

首先，你需要对预加载请求做优先级管理。可以试试引入一个简单的请求队列机制，控制同时发起的请求数量。比如用一个全局的状态来限制：

let currentRequests = 0;

const maxConcurrentRequests = 3;



function fetchData(url, callback) {

    if (currentRequests >= maxConcurrentRequests) return;



    currentRequests++;

    fetch(url)

        .then(response => response.json())

        .then(data => callback(data))

        .catch(error => console.error('Error fetching data:', error))

        .finally(() => currentRequests--);

}



// 在Intersection Observer里调用时

const observer = new IntersectionObserver((entries) => {

    entries.forEach(entry => {

        if (entry.isIntersecting) {

            fetchData(entry.target.dataset.url, data => {

                // 处理数据

            });

        }

    });

}, { threshold: 0.1 });

其次，为了避免白屏和“Too Many Requests”，可以给关键请求加个超时保护。如果某个请求超过一定时间还没响应，就直接取消它。React里可以用AbortController实现：

function safeFetch(url, timeout = 5000) {

    const controller = new AbortController();

    const signal = controller.signal;



    const timeoutId = setTimeout(() => controller.abort(), timeout);



    return fetch(url, { signal })

        .then(response => {

            clearTimeout(timeoutId);

            return response.json();

        })

        .catch(error => {

            if (error.name === 'AbortError') {

                console.warn('Request aborted due to timeout');

            } else {

                console.error('Fetch error:', error);

            }

        });

}

最后，如果你是把这种单页应用嵌到WordPress主题里，记得在主题的functions.php里优化一下服务器端的资源配置。比如通过wp_enqueue_script合理安排前端脚本的加载顺序，别让自定义JS干扰到WordPress的核心脚本。

总的来说，就是限制并发、加超时保护、优化加载顺序。这套组合拳下来，应该能解决你遇到的问题。