如何通过HTML实现prerender预渲染功能？

本文共计866个文字，预计阅读时间需要4分钟。

Visit Example.com

为什么 link rel="prerender" 基本没用

这个标签的作用是让浏览器在空闲时用隐藏 tab 预加载目标页面的完整渲染结果（含 JS 执行、DOM 构建、资源下载），等用户真正点击时直接切换过去。但它有硬性限制：

• 只在 Chrome/Edge（基于 Chromium）中生效，Firefox 和 Safari 完全忽略
• 必须是同源页面，且不能带查询参数或 hash（https://a.com/page ✅，https://a.com/page?id=1 ❌）
• 一旦用户切换标签页、系统进入节电模式、内存紧张，Chrome 会立刻丢弃预渲染页
• 不触发服务端日志、不执行 GA 统计、不被爬虫识别——对 SEO 零贡献

常见误用：<link rel="prerender" href="/product?id=123"> → 实际不会触发任何行为，控制台也无报错，容易让人误以为“起了作用”。