"Speculation Rules 预渲染与导航优化实战"

概览Speculation Rules 允许以声明式方式对候选页面进行预渲染或预取，在真实导航发生时实现近乎即时的切换。核心在于精准判定触发条件与范围控制，避免资源浪费与状态污染。基本用法<script type="speculationrules"> { "prerender": [ { "source": "document", "where": { "href_matches": "/products/.*" } } ], "prefetch": [ { "source": "document", "where": { "href_matches": "/articles/.*" } } ] } </script> 实战要点使用 URL 规则限制范围，避免对大列表或无限滚动页面误触发。对登录态与个性化页面谨慎处理，避免状态泄露或错误缓存。与路由层协作，确保预渲染页面在导航后进行必要的初始化与数据校验。验证清单在 DevTools Performance 面板对导航耗时进行前后对比。通过网络面板核对预取/预渲染的命中与资源占用。针对关键用户路径设置采样实验，确保收益稳定。参考资料Chromium Speculation Rules: https://developer.chrome.com/docs/web-platform/speculation-rules/Prerender 文档: https://developer.chrome.com/docs/web-platform/prerender/