View Transitions 与 Speculation Rules 预渲染协作实践

View Transitions 与 Speculation Rules 预渲染协作实践概述Speculation Rules API 为文档导航提供 `prefetch` 与 `prerender` 推测加载，结合 View Transitions 的跨文档过渡，可实现几乎即时的页面切换与流畅动画。关键参数/概念规则声明：`<script type="speculationrules">{ prerender: [], prefetch: [] }</script>` 为文档级推测加载入口。同源限制：`prerender` 受同站点/凭证限制，`prefetch` 支持跨源但不拉取子资源。过渡匹配：跨文档过渡依赖两端元素的 `view-transition-name` 一致。实践/示例1) 文档内声明推测加载规则<!-- 在列表页声明可能的下一跳导航 --> <script type="speculationrules"> { "prerender": [ { "where": { "hover": true }, "urls": ["/post/123", "/post/124"], "eagerness": "moderate" } ], "prefetch": [ { "urls": ["/post/125", "/post/126"], "referrerPolicy": "no-referrer" } ] } </script> 2) 共享元素过渡命名<style> .card-thumb { view-transition-name: post-thumb; } ::view-transition-old(post-thumb), ::view-transition-new(post-thumb) { animation: fade-scale 200ms ease } @keyframes fade-scale { from { opacity: 0; transform: scale(.98) } to { opacity: 1; transform: scale(1) } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(post-thumb), ::view-transition-new(post-thumb) { animation: none } } /* Firefox 在部分滚动驱动场景需要非零 duration，此处与滚动驱动无关，仅说明差异 */ } </style> 3) 调试与验证Chrome DevTools：Application → Background services → Speculative loads 查看规则与状态。规则改进：`expects_no_vary_search` 与 `No-Vary-Search` 配合提升命中率。验证方法即时性：对比启用/禁用 `prerender` 的导航耗时。动画连贯：检查共享元素在被 prerender 的页面激活后过渡是否自然。回退安全：低电量/慢网速条件下验证浏览器自动降级与体验稳定。注意事项优先将 `prefetch` 用于广覆盖；`prerender` 用于少量高命中导航。跨源限制与凭证约束需遵守，避免隐私/安全问题。页面激活后仍需保证 A11y 与键盘可达性，不以动画替代语义。参考资料MDN: Speculation Rules API（2025 更新）https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_APIChrome Docs: Prerender pages in Chrome for instant navigations（2025）https://developer.chrome.com/docs/web-platform/prerender-pagesChrome Blog: Improvements to the Speculation Rules API（2025）https://developer.chrome.com/blog/speculation-rules-improvementsChrome Docs: Debug speculation rules with DevTools（2025）https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules