rel="prefetch"在新闻标签页切换中常失效，因其依赖onload完成与浏览器空闲，且不支持动态参数url缓存匹配；对/news?page=2等含query的路径99%不命中，safari/ios 16.4前基本忽略as="document"；真正可控的是监听tab悬停+fetch()预取并缓存数据。
新闻列表标签页切换时，预加载下一页内容不是靠 <link rel="prefetch"> 往 里硬塞就能生效的——它大概率不触发、不缓存、不复用，尤其对动态路由或带参数的新闻页（如 /news?category=tech&page=2）基本无效。
为什么 rel="prefetch" 在新闻标签页里常失效
浏览器只在主文档加载完成且空闲时才发起 prefetch 请求，而新闻标签页切换往往发生在用户主动点击后，此时页面早已就绪，prefetch 可能被跳过或延迟到用户都切走了才开始；更关键的是，rel="prefetch" 不支持带 query 参数的 URL 缓存匹配（Chrome 认为 /news?page=2 和 /news?page=3 是不同资源），服务端返回的 Cache-Control 若含 no-cache 或动态 nonce，缓存直接作废。
- 别写
<link rel="prefetch" href="/news?page=2">—— 路径含动态参数，99% 不命中缓存 - 别指望 Safari/iOS 对
as="document"的 prefetch 有响应，iOS 16.4 之前基本忽略 - 如果新闻页由前端路由（如
hash或history.pushState）控制，prefetch 根本不知道你要“切”的是哪个逻辑页面
真正可控的预加载：监听 tab 悬停 + 动态 fetch()
新闻标签页的核心诉求是「用户把鼠标移到「国内」标签上，还没点，就把该分类第 2 页数据拉下来」。这必须用 JS 主动控制时机和请求逻辑。
- 给每个 tab 按钮加
data-category="domestic"，对应预加载地址如/api/news?category=domestic&page=2 - 绑定
mouseenter事件，加setTimeout(..., 200)防误触，再调用fetch()并把结果存在sessionStorage或 Map 中（键用category+page拼接） - 切换时先查缓存：
const cached = cacheMap.get('domestic-2')，有则直接渲染，无则 fallback 到正常请求 - 避免重复请求：悬停触发后设个标记
isPrefetching.set('domestic-2', true)，再次悬停直接 return
切换时不丢失滚动位置和表单状态的关键
新闻列表页若含搜索框、筛选条件或用户已滚动到底部，切换标签时不能销毁 DOM——否则输入内容清空、滚动条跳回顶部。
- 所有新闻面板用
hidden属性控制显隐，**不要**用innerHTML = ''或remove() - 每个面板容器加
style="overflow-y: auto; height: 500px;"，并监听scroll事件存取scrollTop到dataset或 Map 中 - 切换前先执行
targetPanel.scrollTop = targetPanel.dataset.scrollTop || 0，再设hidden = false - 如果用了 Vue/React，确保新闻列表组件没写
v-if="activeTab === 'tech'"，改用v-show或style={{ display: activeTab === 'tech' ? 'block' : 'none' }}
最易被忽略的一点：预加载的数据结构必须和正式请求完全一致（字段名、嵌套层级、时间戳格式），否则缓存拿到手却 parse 失败，等于白忙。宁可多加一层校验函数，也别依赖「应该一样」这种假设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
