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

Mc.富水提问于 2026-03-03 17:05:20 阅读 10

优化

最近在做 React 项目性能优化，想实现“智能预加载”——比如用户在首页滚动到某个区域时，就提前加载商品详情页的资源。但我发现很难准确预测用户下一步会点哪里，目前只是简单地在 hover 时 preload，但效果不好，有些资源根本没用上还浪费带宽。

我试过用 IntersectionObserver 监听元素进入视口，然后动态 import 对应模块，但不确定这算不算“智能”。有没有更靠谱的策略？比如结合用户行为数据或者路由历史？

useEffect(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        import('../pages/ProductDetail').then(module => {
          // 预加载完成，但不知道用户会不会真点进去
        });
      }
    });
  });
  observer.observe(document.querySelector('#product-card'));
}, []);

我来解答赞 1 收藏

反馈

1 条解答

萌新.天瑞 Lv1

别整那些花里胡哨的算法，最有效的“智能”就是判断鼠标悬停意图，加个 200ms 延迟，真想点的人肯定会停顿，快速滑过去的就取消，再配合 requestIdleCallback 在浏览器空闲时加载，既省带宽又不卡顿。

import { useState, useEffect, useRef } from 'react';



const useSmartPreload = (importFn, delay = 200) => {

  const timerRef = useRef(null);



  const preload = () => {

    // 利用 requestIdleCallback 在空闲时加载，避免阻塞主线程

    if ('requestIdleCallback' in window) {

      requestIdleCallback(() => importFn());

    } else {

      // 兜底

      setTimeout(() => importFn(), 0);

    }

  };



  const onMouseEnter = () => {

    timerRef.current = setTimeout(preload, delay);

  };



  const onMouseLeave = () => {

    if (timerRef.current) {

      clearTimeout(timerRef.current);

    }

  };



  return { onMouseEnter, onMouseLeave };

};



// 使用示例

const ProductCard = () => {

  // 鼠标停顿200ms才触发预加载

  const { onMouseEnter, onMouseLeave } = useSmartPreload(() => import('../pages/ProductDetail'));



  return (

    <div 

      onMouseEnter={onMouseEnter} 

      onMouseLeave={onMouseLeave}

      onClick={() => { /* 跳转逻辑 */ }}

    >

      商品卡片

    </div>

  );

};

2026-03-03 20:13