如何用HTML代码中的link标签rel等于prerender预渲染下一个页面-html教程-PHP中文网

rel="prerender"是Chrome等浏览器支持的非标准提示，用于提前加载并渲染高概率访问页面，需HTTPS、绝对/根相对路径、前台标签页等条件，但兼容性差，推荐用prefetch+JS预加载或路由懒加载替代。

如何用html代码中的link标签rel等于prerender预渲染下一个页面

prerender 是什么，什么时候该用

rel="prerender" 是标签的一个提示值，告诉浏览器“这个页面很可能马上会被访问，可以提前加载并渲染它”。但它不是标准规范的一部分，仅被 Chrome 和旧版 Edge（基于 Chromium 之前）支持，Firefox、Safari 完全忽略，现代 Edge（Chromium 内核）虽支持但行为受限（比如只在隐身模式下禁用、需 HTTPS、且页面不可见时可能被中止）。

实际场景中，它适合用在用户操作路径非常确定的环节，比如表单提交后的结果页、分步向导的下一步、或 A/B 测试中 90% 用户都会点击的按钮指向页。不建议用于猜用户行为（如悬停菜单项）或低概率跳转。

怎么写才不会白写

直接写很容易失效。必须满足几个硬性条件：

页面必须通过 HTTPS 提供（HTTP 下 Chrome 直接忽略）
href 必须是绝对 URL 或根相对路径（/next-page.html 可，next-page.html 不可）
目标页面不能有 no-prerender 响应头，也不能返回 4xx/5xx 状态码
浏览器标签页需处于前台且非节电模式（系统级休眠或页面被挂起时会中止 prerender）
同一时间最多只允许一个 prerendering 页面；新请求会取消前一个

常见失效现象和排查方式

写了但没效果？先看控制台和 Network 面板：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

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 更稳定。