如何检查 link[rel=preconnect] 是否完成了工作？

Question

我在页面的 HTML 代码中附加

link[rel=preconnect]

。但如何检查预连接是否有效？

Preconnect 没有出现在 DevTools 的 Network 面板中，我在

chrome://tracing

中没有看到它。

我可以使用哪些工具来查看此活动？

Answer 1

您可以手动使用 Chrome DevTools 来实现此目的。 检查您定义预连接的 URI 的计时选项卡，如果 DNS-Connect-SSL 没有花费时间或者它可以忽略不计（例如 2-5 毫秒），那么您可以认为预连接有效。这里唯一的陷阱是重复测试，当您在浏览器中的连接尚未过期时。

Answer 2

您可以在https://www.webpagetest.org/

创建的瀑布中看到它

这是一个例子：

请注意，您的网站需要可在线访问，WebPageTest 才能读取它。

Answer 3

来自 DebugBear 的这个工具显示了这一点，以及其他有用的预加载/预连接数据：

https://www.debugbear.com/resource-hint-validator