应基于用户意图提前预取资源：用intersectionobserver配合rootmargin和threshold检测元素进入热区，叠加mouseenter/touchstart行为信号，分级预取html、js、css并缓存，通过weakmap与url去重、并发限制保障稳定性。
要让异步跳转（比如 SPA 内部路由切换、Tab 切换、弹窗内容加载）更顺滑，不能等用户点开才开始拉资源——得在用户“大概率要进”的那一刻就提前预取。IntersectionObserver 本身不处理跳转，但可以作为行为信号源，配合页面结构和用户意图，构建一套轻量、可感知的预取机制。
用 rootMargin 模拟“即将点击”窗口
对带 data-prefetch="true" 的链接或 tab 按钮，不监听 click，而是用 IntersectionObserver 监听其是否进入“操作热区”：
- 设置 rootMargin: "100px"（桌面）或 "50px"（移动端），相当于把视口向下/向右扩展一段距离，按钮离屏幕中心还有 50–100px 时即触发预取
- 避免用 threshold: 0——它只反映“刚露边”，而用户伸手/悬停前已有视觉聚焦趋势；改用 threshold: [0.1]，确保元素至少有 10% 面积稳定可见再行动
- 对 Tab 栏、导航菜单这类水平排列组件，可设 rootMargin: "0px 120px 0px 120px"，左右各扩 120px，覆盖横向扫视习惯
绑定交互信号增强意图判断
单纯靠滚动位置不够，需叠加轻量用户行为信号，降低误触发：
- 监听 mouseenter：当鼠标移入某 tab 按钮或卡片区域，立即触发其 data-module 或 data-href 对应的目标模块资源预取（如 fetch HTML 片段、JSON 数据、关键 CSS）
- 对触屏设备，监听 touchstart（节流至 300ms 内仅响应一次），比 click 更早捕捉操作意图
- 若该元素已处于 isIntersecting === true 状态，且 500ms 内未发生点击，则自动取消预取 promise，释放内存和连接
分级预取 + 资源就绪控制
异步跳转常涉及 HTML、JS、CSS、数据三类资源，不能一锅端：
- HTML 片段：fetch 后存入 sessionStorage 或 Map 缓存，key 为 data-href 值；跳转时直接 innerHTML 渲染，不重复请求
- 模块 JS：用 import() 动态加载后暂存 Promise，后续跳转直接 await，避免重复解析
- 关键样式：对 data-css="xxx.css" 的元素，在预取阶段插入 ，由浏览器调度优先级
- 所有预取完成前，保持目标容器显示 skeleton 或 loading 状态；解码/解析失败时降级为按需加载，不阻断主流程
防抖与去重保障稳定性
用户快速划过菜单、反复悬停、多 tab 并行时，必须抑制并发和重复：
- 每个 DOM 元素对应一个 WeakMap 条目：prefetchState.set(el, { promise, timestamp })，再次触发时若 promise 未 reject，直接复用
- 全局 URL 去重：用 Map 缓存 url → promise，相同 data-href 或 data-module 只执行一次 fetch
- 限制最大并发数为 2，内部用 Promise.allSettled(queue.slice(0, 2)) 控制，防止抢占首屏资源带宽
