在本练习中，/slow-a 和 /slow-b 路由的 load 函数中都有人为延迟，这意味着导航到这些页面需要很长时间。
你不总是能让数据加载得更快 — 有时这超出了你的控制范围 — 但是 SvelteKit 可以通过预测导航来加速。当 <a> 元素有 data-sveltekit-preload-data 属性时，SvelteKit 会在用户悬停在链接上（桌面端）或点击它（移动端）时就开始导航。试着将它添加到第一个链接：
src/routes/+layout
<nav>
<a href="/">home</a>
<a href="/slow-a" data-sveltekit-preload-data>slow-a</a>
<a href="/slow-b">slow-b</a>
</nav>现在导航到 /slow-a 将明显更快。在悬停或点击时开始导航（而不是等待 click 事件被注册）听起来可能不会有太大区别，但在实践中通常可以节省 200ms 或更多。这足以使体验从迟缓变得流畅。
你可以将该属性放在单个链接上，或者放在包含链接的任何元素上。默认的项目模板在 <body> 元素上包含了该属性：
<body data-sveltekit-preload-data>
%sveltekit.body%
</body>你可以通过为该属性指定以下值之一来进一步自定义行为：
"hover"（默认值，在移动端回退到"tap"）"tap"— 仅在点击时开始预加载"off"— 禁用预加载
使用 data-sveltekit-preload-data 有时可能会导致误判 — 即为可能不会发生的导航预加载数据 — 这可能是不受欢迎的。作为替代方案，data-sveltekit-preload-code 允许你预加载特定路由所需的 JavaScript，而不急于加载其数据。此属性可以有以下值：
"eager"— 在导航后预加载页面上的所有内容"viewport"— 预加载视口中出现的所有内容"hover"（默认）如上所述"tap"— 如上所述"off"— 如上所述
你也可以通过从 $app/navigation 导入的 preloadCode 和 preloadData 以编程方式启动预加载：
import { preloadCode, preloadData } from '$app/navigation';
// 预加载导航到 /foo 所需的代码和数据
preloadData('/foo');
// 预加载导航到 /bar 所需的代码，但不包括数据
preloadCode('/bar');1
<h1>home</h1>