智能预加载怎么判断用户下一步要访问哪个页面？

建英提问于 2026-03-01 03:04:21 阅读 45

优化

我最近在做首页性能优化，想用智能预加载提前加载用户可能点击的页面资源，但完全不知道该怎么预测用户行为。

试过用 IntersectionObserver 监听可视区域内的链接，但很多关键按钮并不在首屏，等用户滚动到那里再预加载就晚了。也看过一些文章提到用历史行为分析，可我们是新项目，根本没有用户数据。

有没有轻量级的方案？比如基于当前页面上下文或链接位置做简单预测？现在卡在这儿了，求指点！

我来解答赞 15 收藏

反馈

1 条解答

世祥 Dev Lv1

新项目没数据就用鼠标悬停预加载，用户 hover 到链接上到真正点击之间有 200-300ms 的延迟，足够完成资源预加载了，这是最简单有效的方案。

// 鼠标悬停预加载，简单粗暴但有效

const prefetched = new Set();



document.addEventListener('mouseover', (e) => {

  const link = e.target.closest('a[href]');

  if (!link || prefetched.has(link.href)) return;

  

  // 给个 50ms 延迟，避免鼠标划过就触发

  const timer = setTimeout(() => {

    const prefetch = document.createElement('link');

    prefetch.rel = 'prefetch';

    prefetch.href = link.href;

    document.head.appendChild(prefetch);

    prefetched.add(link.href);

  }, 50);

  

  link.dataset.timer = timer;

}, true);



document.addEventListener('mouseout', (e) => {

  const link = e.target.closest('a[href]');

  if (link?.dataset.timer) clearTimeout(link.dataset.timer);

}, true);

再配合 mousedown 事件做兜底，移动端用 touchstart，这套方案应该能用。

2026-03-01 06:00