document.prerender 并不存在，是误传；实际可用的是 <link rel="prefetch"> 等标准方案，用于轻量预取资源，现代浏览器广泛支持且安全可控。
document.prerender 并不是一个标准的、被主流浏览器支持的 Web API，目前（截至 2024 年）不存在 document.prerender 这个属性或方法。它不属于 HTML 规范、WHATWG 或 W3C 标准，也不在 Chrome、Firefox、Safari 或 Edge 的公开文档中。
你可能混淆了以下几种真实存在的、与“预渲染”或“快速导航”相关的机制：
✅ 真实可用的页面预加载/预渲染方案
1. <link rel="prerender">（已弃用，仅历史参考）
Chrome 曾在 2013–2017 年间支持：
<link rel="prerender" href="https://example.com/next-page.html">
但该功能已于 Chrome 65（2018 年）彻底移除，因资源开销大、隐私风险高、使用率低。其他浏览器从未实现。
⚠️ 现在写这个标签无效，不会触发任何预渲染行为。
2. <link rel="prefetch">（推荐：轻量、广泛支持）
用于后台预取下一跳可能需要的资源（HTML、JS、CSS、图片等），不执行脚本、不解析 DOM，不占用主线程：
<link rel="prefetch" href="/dashboard.html" as="document"> <link rel="prefetch" href="/app.js" as="script">
- ✅ 支持所有现代浏览器（Chrome、Firefox、Safari 16.4+、Edge）
- ✅ 低优先级，空闲时进行，不影响当前页性能
- ✅ 适合“用户大概率要访问”的场景（如登录后跳首页、分页按钮旁的下一页）
3. <link rel="preload">（非预渲染，是关键资源提前加载）
仅用于当前页面即将用到的资源（如首屏字体、核心 JS）：
<link rel="preload" href="hero-image.webp" as="image" fetchpriority="high">
⚠️ 不适用于“次级页面”，仅限当前页上下文。
4. 前端路由级优化（SPA 场景）
若你用 React/Vue/Svelte 构建单页应用：
- 使用
Suspense+lazy()（React）或异步组件（Vue）按需加载路由模块 - 配合
prefetch在 hover / focus 时触发（如 React Router 的usePrefetch或自定义onMouseEnter加载） - 示例（伪代码）：
const Dashboard = lazy(() => import('./Dashboard')); // 用户悬停“仪表盘”菜单时预取 onMouseEnter={() => import('./Dashboard')}
5. 后备策略：Service Worker 缓存 + Navigation Preload
对多页应用（MPA），可结合：
- Service Worker 缓存常用 HTML 模板或 API 响应
- 启用
navigationPreload，让 SW 在页面请求发出时并行拉取新 HTML：self.addEventListener('activate', (e) => { e.waitUntil(self.registration.navigationPreload.enable()); });
❌ 为什么没有 document.prerender？
- 渲染是高成本操作（布局、绘制、合成），无法安全地在后台“静默完成”
- 浏览器沙箱隔离严格，跨页面 DOM/JS 执行会引发状态污染、内存泄漏、隐私泄露（如读取 localStorage、触发 beacon）
- 现代替代方案（prefetch + SPA 路由懒加载 + SSR/SSG）更可控、更细粒度、更符合渐进增强原则
✅ 实现“次级页面感知式瞬间跳转”的实用组合建议
-
对 MPA（传统多页）：
- 页面中
<link rel="prefetch" href="/next.html" as="document"> - 点击链接时监听
click，用event.preventDefault()+fetch()获取 HTML，再用history.pushState()+document.open()/write()注入（需处理相对路径、脚本重执行等，较复杂） - 更稳妥：服务端开启 HTTP/2 Server Push（已淘汰）或升级为 HTTP/3 + Early Hints（
103 Early Hints）
- 页面中
-
对 SPA：
- 路由切换前
import()下一个页面模块 - 配合骨架屏 +
Suspense，视觉上“无等待感” - 预请求关键数据（如
queryClient.prefetchQuery）
- 路由切换前
不复杂但容易忽略：真正的“极速跳转”不靠单点黑科技，而靠资源调度时机（prefetch）、执行粒度（code-splitting）、缓存策略（CDN + SW）和用户体验设计（加载反馈、骨架、预测交互）协同作用。
