推测规则可用于预提取和预呈现下一页导航,详见上一篇博文。这可以大幅提升网页加载速度,甚至是即时加载网页,从而极大地提升这些额外的网页导航操作的核心网页指标。
调试推测规则可能会比较复杂。对于预渲染的网页尤其如此,因为这些网页在单独的渲染程序中渲染,有点像隐藏的背景标签页,会在激活后替换当前标签页。因此,可能无法始终使用常规的开发者工具选项来调试问题。
Chrome 团队一直在努力增强开发者工具对推测规则调试的支持。在本博文中,您将了解使用这些工具的各种不同方式,从而了解网页的推测规则、它们可能不起作用的原因,以及开发者何时可以使用更熟悉的开发者工具选项,以及何时无法使用。
“使用前”字词的说明
很多“前”术语令人感到困惑,因此,我们先解释一下这些术语:
- 预提取:提前提取资源或文档,以提高未来性能。这篇博文介绍了如何使用 Speculation Rules API 预提取文档,而不是使用类似但较旧的
<link rel="prefetch">
选项(通常用于预提取子资源)。 - 预渲染:这比预提取更重要,并且会实际渲染整个页面,就像用户导航到了页面一样,但会将页面保留在隐藏的后台渲染程序进程中,以供用户实际导航到该页面时使用。同样,本文档涉及的都是较新的 Speculation Rules API 版本,而不是旧的
<link rel="prerender">
选项(不再执行完整的预渲染)。 - 导航推测:由推测规则触发的新预提取和预渲染选项的统称。
- 预加载:一个过载的术语,指的是许多技术和流程,包括
<link rel="preload">
、预加载扫描程序和 Service Worker 导航预加载。此处未涉及这些内容,但添加该术语是为了明确将其与“导航推测”术语区分开来。
“prefetch
”的推测规则
推测规则可用于预提取下一次导航的文档。例如,将以下 JSON 插入页面时,系统会预提取 next.html
和 next2.html
:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
与旧版 <link rel="prefetch">
语法相比,使用推测规则进行导航预提取具有一些优势,例如具有更丰富的表现力,并且结果会存储在内存缓存(而不是 HTTP 磁盘缓存)中。
调试 prefetch
推测规则
在“网络”面板中查看由推测规则触发的预提取与其他提取一样的方式:
如 Type 列所示,以红色突出显示的两个请求是预提取的资源。系统会按照 Lowest
优先级提取这些网页,因为它们会用于日后的导航,而 Chrome 会优先抓取当前网页的资源。
点击其中一行还会显示 Sec-Purpose: prefetch
HTTP 标头,即在服务器端识别这些请求的方式:
使用“推测加载”标签页调试 prefetch
Chrome 开发者工具的 Application 面板中的 Background services 部分下添加了新的 推测加载部分,以帮助调试推测规则:
此部分提供了三个标签页:
- 推测加载:列出了当前网页的预呈现状态。
- 规则:列出了在当前页面上找到的所有规则集。
- 推测,列出了规则集中的所有预提取和预呈现网址。
推测标签页显示在上一个屏幕截图中,我们可以看到,此示例页面有一组用于预提取 3 个页面的推测规则。其中两个预提取成功,一个失败。您可以点击规则集旁边的图标,前往元素面板中的规则集的来源。或者,您也可以点击状态链接,将您带到按该规则集过滤的推测标签页。
推测标签页列出了所有目标网址,同时列出了相应操作(预提取或预呈现)、它们来自哪个规则集(因为一个网页上可能有多个规则集),以及每个推测的状态:
在网址上方,您可以使用下拉菜单显示所有规则集中的网址,或仅显示特定规则集中的网址。下方列出了所有网址。点击网址即可查看更详细的信息。
在此屏幕截图中,我们可以看到 next3.html
页面的失败原因(该页面不存在,因此会返回 404,这是一个非 2xx HTTP 状态代码)。
“摘要”标签页推测加载会显示此网页的推测加载状态报告,以表明该网页是使用了预提取还是预渲染。
对于预提取的网页,您应该会在转到该网页时看到一条成功消息:
无与伦比的推测
如果从某个页面中导航时,推测规则不会使用预提取或预呈现,该标签页的另一部分会显示更多详细信息,说明相应网址与任何推测网址都不匹配的原因。这有助于发现推测规则中的拼写错误。
例如,在这里,我们导航到了 next4.html
,但只有 next.html
、next2.html
或 next3.html
是预提取的,因此可以看到这并不完全符合这三条规则中的任何一条。
推测加载标签页对于调试推测规则本身以及查找 JSON 中的任何语法错误非常有用。
至于预提取本身,Network 面板可能是更为熟悉的地方。对于预提取失败的示例,您可以在此处查看预提取的 404 错误:
不过,推测加载标签页对于预渲染推测规则(我们将在下文中介绍)更加有用。
“prerender
”的推测规则
预渲染推测规则遵循的语法与预提取推测规则相同。例如:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
此规则集会触发完全加载并呈现指定网页(具体取决于特定限制)。这样可以提供即时加载体验,但需要额外的资源成本。
不过,与预提取不同,这些内容无法在网络面板中查看,因为这些预提取是在 Chrome 中单独的渲染进程中进行提取并呈现的。这使得“推测加载”标签页在调试预渲染推测规则方面更为重要。
使用“推测加载”标签页调试 prerender
如演示页面所示,同一推测加载屏幕可用于预渲染推测规则,该演示页面尝试预渲染,而不是预提取这三个页面:
在这里,我们再次看到三个网址中有其中一个未能预渲染,开发者可以在 Speculations 标签页中点击 2 Ready, 1 Failure 链接来获取每个网址的详细信息。
在 Chrome 121 中,我们推出了文档规则支持。这样,浏览器就能够从网页上的同源链接获取这些网址,而不是列出一组特定的网址:
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
此示例选择所有相同源链接(以 /not-safe-to-prerender
开头的链接除外)作为预渲染候选链接。
此外,它还将预渲染 eagerness
设置为 moderate
,这意味着当用户将鼠标悬停在链接上或点击链接时,系统会预渲染导航。
推测规则演示网站上有类似的规则。使用本网站上新增的推测加载部分,即可了解这个新标签页的实用性,因为系统列出了浏览器在该页面上找到的所有符合条件的网址:
状态为未触发,因为对这些图片的预渲染流程尚未开始。但是,将指针悬停在链接上时,我们会看到预渲染每个网址时的状态会发生变化:
Chrome 设置了预渲染限制,包括针对 moderate
紧急程度最多可进行 2 次预渲染,因此,当您将鼠标悬停在第 3 个链接上后,就会看到该网址的失败原因:
使用其他开发者工具面板调试 prerender
与预提取不同,已预渲染的页面不会显示在开发者工具面板(例如 Network 面板)的当前渲染进程中,因为它们是在各自的后台渲染程序中进行渲染的。
不过,您现在可以通过以下方式切换开发者工具面板使用的渲染程序:使用右上角下拉菜单中的下拉菜单,或者在面板顶部选择一个网址并选择检查:
此下拉菜单(及所选值)也会在所有其他面板之间共享,例如“Network”面板,您可以在该面板中看到所请求的页面是预渲染的网页:
查看这些资源的 HTTP 标头后,我们可以看到它们都使用 Sec-Purpose: prefetch;prerender
标头进行设置:
或者元素面板,您可以在其中查看网页内容,如以下屏幕截图所示,其中 <h1>
元素用于预渲染的页面:
或者,您也可以在控制台面板上查看预渲染页面发出的控制台日志:
在预渲染的网页上调试推测规则
前面的部分讨论了如何在启动预渲染的网页上调试预渲染的网页。不过,预渲染的网页本身也可以提供调试信息,方法是进行分析调用或记录到控制台(可以按上一部分中的说明查看)。
此外,当用户前往预渲染的网页激活预渲染的网页后,推测加载标签页将显示此状态,以及是否已成功预渲染。如果无法预渲染,则提供原因说明:
此外,与预提取一样:如果您从所含推测规则与当前网页不匹配的网页导航,则会尝试向您显示为何这些网址与之前网页的推测加载标签页中的推测规则所涵盖的网址不匹配:
总结
在这篇博文中,我们介绍了开发者调试预提取和预渲染推测规则的各种方法。该团队会继续努力开发适用于推测规则的工具,我们很想听听开发者的建议,看看还有哪些其他方式有助于调试这个令人兴奋的新 API。如果开发者发现任何功能请求或错误,我们建议开发者在 Chrome 问题跟踪器上报告问题。
致谢
缩略图,由 Nubelson Fernandes 制作,上传于 Unsplash 网站。