如何在页面跳转前预加载目标页面API数据以降低加载延迟

一、跳转至下一页时获取预加载数据 #

这里给你几种实用的实现方案：

• 浏览器本地存储（LocalStorage/SessionStorage）
  在调用API拿到数据后，把临时数据存在sessionStorage或localStorage里，跳转后的页面直接读取即可。sessionStorage是会话级存储，关闭标签就自动清除，适合这种临时预加载场景；localStorage会持久化，需要手动清理。示例代码：

// 跳转前页面：调用API后存储数据
fetch('/api/next-page-data')
  .then(res => res.json())
  .then(data => {
    sessionStorage.setItem('preloadedData', JSON.stringify(data));
    window.location.href = '/next-page';
  });

// 跳转后页面：读取预加载数据
document.addEventListener('DOMContentLoaded', () => {
  const preloadedData = JSON.parse(sessionStorage.getItem('preloadedData'));
  if (preloadedData) {
    renderPage(preloadedData); // 用数据渲染页面
    sessionStorage.removeItem('preloadedData'); // 用完清除，避免冗余存储
  } else {
    // 兜底：没拿到预加载数据就重新请求
    fetch('/api/next-page-data').then(res => res.json()).then(renderPage);
  }
});

• URL参数传递（仅限小体量数据）
  如果数据很小，可以转成JSON字符串拼在URL参数里，但要注意URL有长度限制，大数据别用这种方式。示例：

// 跳转前
fetch('/api/next-page-data')
  .then(res => res.json())
  .then(data => {
    const encodedData = encodeURIComponent(JSON.stringify(data));
    window.location.href = `/next-page?preload=${encodedData}`;
  });

// 跳转后
document.addEventListener('DOMContentLoaded', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const preloadedDataStr = urlParams.get('preload');
  if (preloadedDataStr) {
    const preloadedData = JSON.parse(decodeURIComponent(preloadedDataStr));
    renderPage(preloadedData);
  } else {
    // 兜底请求
    fetch('/api/next-page-data').then(res => res.json()).then(renderPage);
  }
});

• 框架全局状态管理（Vue/React项目适用）
  如果用Vuex、Pinia、Redux这类工具，可以把预加载数据存在全局状态里，跳转后的页面直接读取状态。以Pinia为例：

// 状态仓库定义
import { defineStore } from 'pinia';
export const useDataStore = defineStore('data', {
  state: () => ({ nextPageData: null }),
  actions: {
    setNextPageData(data) {
      this.nextPageData = data;
    }
  }
});

// 跳转前页面
import { useDataStore } from './stores/data';
const dataStore = useDataStore();

fetch('/api/next-page-data')
  .then(res => res.json())
  .then(data => {
    dataStore.setNextPageData(data);
    router.push('/next-page'); // Vue Router跳转
  });

// 跳转后页面
import { useDataStore } from './stores/data';
const dataStore = useDataStore();

onMounted(() => {
  if (dataStore.nextPageData) {
    renderPage(dataStore.nextPageData);
    dataStore.setNextPageData(null); // 可选：用完清空状态
  } else {
    fetch('/api/next-page-data').then(res => res.json()).then(renderPage);
  }
});

二、跳转前预先加载数据（减少页面延迟） #

核心是利用用户操作的时间差提前发起请求，比如从鼠标悬停按钮到点击的间隙，或者当前页面加载完成后的空闲时间：

• 监听按钮预交互事件
  用户把鼠标放到跳转按钮上时，大概率会点击，这时候就可以提前发起API请求：

const jumpBtn = document.getElementById('jump-btn');
let preloadPromise = null;

// 鼠标悬停时预加载数据
jumpBtn.addEventListener('mouseover', () => {
  if (!preloadPromise) {
    preloadPromise = fetch('/api/next-page-data').then(res => res.json());
  }
});

// 点击按钮时，等预加载完成再跳转
jumpBtn.addEventListener('click', async () => {
  try {
    const data = await preloadPromise;
    sessionStorage.setItem('preloadedData', JSON.stringify(data));
    window.location.href = '/next-page';
  } catch (err) {
    // 请求失败直接跳转，让下一页自行处理
    window.location.href = '/next-page';
  }
});

• 单页应用预加载路由与数据
  如果是Vue/React这类单页应用，可以提前加载目标页面的组件和数据：

// Vue Router 示例：预加载组件和数据
const nextPage = () => import('./NextPage.vue');

function preloadNextPage() {
  // 预加载组件
  nextPage();
  // 预加载数据并存入状态
  fetch('/api/next-page-data').then(res => res.json()).then(data => {
    const dataStore = useDataStore();
    dataStore.setNextPageData(data);
  });
}

// 当前页面渲染完成后，延迟1秒预加载（避免影响当前页面性能）
onMounted(() => {
  setTimeout(preloadNextPage, 1000);
});

• Service Worker缓存（适合高频访问页面）
  如果页面需要频繁打开，可以用Service Worker把API数据缓存起来，下次跳转直接读缓存，适合静态或更新不频繁的数据：

// Service Worker 中缓存请求逻辑
self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('/api/next-page-data')) {
    event.respondWith(
      caches.match(event.request)
        .then(cachedResponse => {
          // 优先返回缓存，后台同时更新缓存
          const fetchPromise = fetch(event.request).then(networkResponse => {
            caches.open('data-cache').then(cache => {
              cache.put(event.request, networkResponse.clone());
            });
            return networkResponse;
          });
          return cachedResponse || fetchPromise;
        })
    );
  }
});

内容的提问来源于stack exchange，提问作者Shashi kiran