一、前言
在现代Web应用中，用户体验（User Experience, UX）的重要性日益凸显。一个流畅、响应迅速的网站，能够显著提升用户的满意度和留存率。然而，在追求极致性能的道路上，我们常常会遇到一个棘手的挑战------硬导航（Hard Navigation）。当用户点击一个链接，浏览器需要完全卸载当前页面，再重新加载新页面时，这种"硬"切换往往伴随着延迟和短暂的空白，极大地损害了用户体验。本文将深入探讨硬导航的本质，并介绍如何通过现代浏览器技术，有效地优化这一过程，让你的网站在用户眼中更加"丝滑"。
二、软导航与硬导航：理解网页切换的两种模式
要理解硬导航的优化，我们首先需要区分两种主要的网页导航方式：软导航和硬导航。
1. 软导航（Soft Navigation）
软导航，顾名思义，是一种"柔和"的页面切换方式。它主要出现在**单页应用（Single Page Application, SPA）**中。当用户在SPA内部进行页面跳转时，浏览器并不会重新加载整个文档。相反，应用程序会动态地替换页面中的主要内容区域，同时按需加载新的JavaScript和CSS资源。这种方式的优势在于：
- 速度快：避免了整个页面的重新解析和渲染。
- 体验流畅：页面不会出现闪烁或空白，用户感觉像是在同一个应用内切换视图。
- 资源高效：只加载增量资源，减少了不必要的网络请求。
2. 硬导航（Hard Navigation）
与软导航相对的，便是硬导航。当用户点击的链接指向一个完全不同的应用、不同的域名，或者需要浏览器完全重新加载整个文档时，就会发生硬导航。例如，从你的网站跳转到外部电商平台，或者从SPA内部跳转到一个非SPA的传统页面。硬导航的特点是：
- 完全重载：浏览器会卸载当前文档及其所有相关资源（如JavaScript、CSS、图片等）。
- 重新加载：然后，浏览器会从头开始加载新文档及其所有子资源。
- 用户感知明显：由于需要重新建立连接、下载资源、解析和渲染，用户通常会感受到明显的延迟，甚至看到短暂的空白页面（俗称"白屏"）。
3. 为什么硬导航需要优化？
硬导航带来的延迟和不流畅体验，是影响用户留存率和转化率的重要因素。想象一下，用户每次点击链接都要等待几秒钟，甚至看到页面闪烁，这无疑会让他们感到沮丧。尤其是在网络环境不佳的情况下，硬导航的负面影响会被进一步放大。因此，优化硬导航，使其尽可能接近软导航的体验，是提升网站整体性能和用户满意度的关键一环。
三、优化的核心思路：预加载与预渲染
面对硬导航带来的挑战，现代浏览器提供了一系列机制来缓解其负面影响。核心思路在于一个"预 "字------预先加载（Prefetching）和预先渲染（Prerendering）。这两种技术的目标都是在用户实际访问页面之前，提前做好准备工作，从而缩短用户等待时间，提升导航的感知速度。
1. 预取（Prefetching）
预取是指浏览器在用户点击链接之前，提前下载新页面所需的文档和部分子资源。这就像是你在出门前，提前把可能需要的东西准备好，这样等你真正需要的时候，就能立刻拿到。当用户最终点击链接时，由于部分资源已经缓存，浏览器可以更快地呈现新页面，从而减少了等待时间。
2. 预渲染（Prerendering）
预渲染 则更为激进。它不仅预取了新页面的内容，还会像用户已经访问过一样，在后台一个不可见的标签页中完整地渲染新页面。当用户点击链接时，浏览器可以直接将这个已经渲染好的页面切换到前台，实现即时导航（Instant Navigation）。这种体验几乎与软导航无异，但代价是会消耗更多的网络和计算资源。预渲染就像是你在看电影之前，电影院已经把电影播放到某个暂停点，等你一进去就能立刻接着看。
四、Speculation Rules API：现代浏览器的利器
为了更精细地控制预取和预渲染的行为，现代浏览器引入了Speculation Rules API [1]。这是一个强大的新API，允许开发者通过声明式的方式，定义哪些链接应该被预取或预渲染，以及在何种条件下进行。它通过在HTML中插入一个<script type="speculationrules">标签来实现，或者通过HTTP响应头来配置。
1. 基本语法
Speculation Rules API 的核心是一个JSON对象，它定义了预取和预渲染的规则。例如：
html
<script type="speculationrules">
{
"prerender": [
{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/logout" } },
{ "not": { "selector_matches": ".no-prerender" } }
]
}
}
],
"prefetch": [
{
"urls": ["/next-page.html", "/another-page.html"],
"requires": ["anonymous-client-ip-when-cross-origin"],
"referrer_policy": "no-referrer"
}
]
}
</script>这段代码定义了两组规则：一组用于预渲染，另一组用于预取。prerender和prefetch数组中的每个对象都代表一个规则集。
2. 匹配规则
Speculation Rules API 提供了灵活的匹配机制，让你可以精确控制哪些链接触发预加载行为：
href_matches：通过URL模式匹配链接。例如，"href_matches": "/*"表示匹配所有内部链接。selector_matches：通过CSS选择器匹配链接。例如，"selector_matches": ".no-prerender"可以排除带有特定CSS类的链接。where：结合and、or、not等逻辑操作符，构建复杂的匹配条件。urls：直接指定要预取或预渲染的URL列表。
这些规则使得开发者能够根据业务逻辑和用户行为，智能地选择需要优化的导航路径。
五、触发时机（Eagerness）：何时启动预加载？
Speculation Rules API 允许我们定义预加载的触发时机（Eagerness），这对于平衡性能提升和资源消耗至关重要。不同的触发时机决定了浏览器何时开始预取或预渲染。
immediate：页面加载完成后立即启动预加载。这会消耗较多资源，但能最大程度地提升用户体验。hover：当用户鼠标悬停在链接上时启动预加载。这是一种较为保守的策略，只在用户表现出兴趣时才进行预加载。conservative：一种平衡策略，通常在用户有较高概率点击链接时触发，例如在视口内可见的链接。moderate：介于conservative和immediate之间，比conservative更积极，但比immediate更节省资源。
通过合理配置eagerness属性，我们可以在提供流畅体验的同时，避免不必要的资源浪费。
六、传统方案与兼容性：link rel="prefetch"
尽管 Speculation Rules API 功能强大，但它目前主要由基于Chromium的浏览器（如Chrome、Edge、Opera）支持。为了兼容不支持新API的浏览器，我们仍然可以使用传统的link标签进行预取。
1. link rel="prefetch" 的用法
link rel="prefetch" 是一种较早的预取机制，它告诉浏览器在空闲时下载指定资源，以便将来使用。它只能用于预取资源，不支持预渲染。
html
<link rel="prefetch" href="/link-to-other-application" />当浏览器解析到这个标签时，它会在后台悄悄地下载/link-to-other-application这个页面及其相关资源。当用户真正访问这个链接时，页面加载速度会显著加快。
2. 两种方案的结合使用
在实际应用中，我们可以将 Speculation Rules API 和 link rel="prefetch" 结合使用，以实现最佳的兼容性和性能：
- 对于支持 Speculation Rules API 的浏览器，优先使用该API进行精细化的预取和预渲染。
- 对于不支持的浏览器，则回退到
link rel="prefetch"，至少提供基础的预取能力。
这种渐进增强的策略，确保了所有用户都能从硬导航优化中受益。
七、在 Next.js/React 中的实践
对于使用 Next.js 或 React 等现代前端框架的开发者来说，将这些优化技术集成到应用中变得更加便捷。框架通常会提供抽象层，简化API的使用。
1. 封装 SpeculationRules 组件
在 React 中，我们可以创建一个 SpeculationRules 组件来动态地插入 Speculation Rules：
jsx
import Script from 'next/script';
export function SpeculationRules({
prefetchPathsOnHover,
prerenderPathsOnHover,
}) {
const speculationRules = {
prefetch: [
{
urls: prefetchPathsOnHover,
eagerness: 'moderate',
},
],
prerender: [
{
urls: prerenderPathsOnHover,
eagerness: 'conservative',
},
],
};
return (
<Script
dangerouslySetInnerHTML={{
__html: `${JSON.stringify(speculationRules)}`,
}}
type="speculationrules"
/>
);
}这个组件接收 prefetchPathsOnHover 和 prerenderPathsOnHover 等属性，允许开发者通过组件的props来配置预取和预渲染的URL和触发时机，从而实现声明式的优化。
2. 自动预取的实现逻辑
对于 link rel="prefetch"，我们也可以在 React 中封装一个自定义的 Link 组件，实现鼠标悬停自动预取的功能。这通常涉及到创建一个上下文（Context）来跟踪已经预取过的链接，并利用 onMouseOver 事件来触发预取。
jsx
import { forwardRef, useContext } from 'react';
// 假设 PrefetchLinksContext 已经定义并提供了 prefetchHref 方法
import { PrefetchLinksContext } from './PrefetchLinksContext';
export const Link = ({ children, ...props }) => {
const { prefetchHref } = useContext(PrefetchLinksContext);
function onHoverPrefetch(): void {
if (!props.href) {
return;
}
prefetchHref(props.href);
}
return (
<a
{...props}
onMouseOver={props.prefetch !== false ? onHoverPrefetch : undefined}
>
{children}
</a>
);
};通过这种方式，开发者可以轻松地在应用中集成预取逻辑，而无需手动管理每个 link 标签。当用户鼠标悬停在自定义的 Link 组件上时，相关的页面资源就会在后台开始下载，为用户下一次点击做好准备。