rel="prerender"是chrome等浏览器支持的非标准提示，用于提前加载并渲染高概率访问页面，需https、绝对/根相对路径、前台标签页等条件，但兼容性差，推荐用prefetch+js预加载或路由懒加载替代。
prerender 是什么，什么时候该用
rel="prerender" 是 <link> 标签的一个提示值，告诉浏览器“这个页面很可能马上会被访问，可以提前加载并渲染它”。但它不是标准规范的一部分，仅被 Chrome 和旧版 Edge（基于 Chromium 之前）支持，Firefox、Safari 完全忽略，现代 Edge（Chromium 内核）虽支持但行为受限（比如只在隐身模式下禁用、需 HTTPS、且页面不可见时可能被中止）。
实际场景中，它适合用在用户操作路径非常确定的环节，比如表单提交后的结果页、分步向导的下一步、或 A/B 测试中 90% 用户都会点击的按钮指向页。不建议用于猜用户行为（如悬停菜单项）或低概率跳转。
怎么写才不会白写
直接写 <link rel="prerender" href="/next-page.html"> 很容易失效。必须满足几个硬性条件：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 页面必须通过 HTTPS 提供（HTTP 下 Chrome 直接忽略）
-
href必须是绝对 URL 或根相对路径（/next-page.html可，next-page.html不可） - 目标页面不能有
no-prerender响应头，也不能返回 4xx/5xx 状态码 - 浏览器标签页需处于前台且非节电模式（系统级休眠或页面被挂起时会中止 prerender）
- 同一时间最多只允许一个 prerendering 页面；新请求会取消前一个
常见失效现象和排查方式
写了但没效果？先看控制台和 Network 面板：
- Network 中看不到
next-page.html的请求 → 检查是否 HTTPS、href路径是否合法、是否被 CSP 的prefetch-src拦截 - 能看到请求但状态是
(prerender)然后消失 → 页面被切换到后台、内存压力大、或目标页触发了 JS 导致 prerender 被丢弃（比如调用了alert()、document.write()、或监听了visibilitychange并主动终止） - Chrome DevTools 的 Application → Rendering → “Prerendered pages” 列表为空 → 说明根本没进入 prerender 队列，优先查协议和路径
比 prerender 更靠谱的替代方案
因为兼容性和稳定性问题，生产环境更推荐组合使用：
- 对关键下一步：用
rel="prefetch"（资源级预取，兼容性好，不渲染） + 页面 JS 在用户 hover 或 focus 时主动fetch()HTML 片段做缓存 - 对单页应用：路由预加载（如 Vue Router 的
component: () => import('./Next.vue')）比 HTML prerender 更可控 - 服务端可配合 HTTP/2 Server Push（已逐步淘汰）或 Early Hints（
103 Early Hints响应）提前推送资源
真正需要“渲染完成即显示”的体验，不如把下一个页面做成内联 iframe 或 modal 内容区，首次访问时懒加载并隐藏准备，比依赖浏览器 prerender 更稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
