我如何检查 link[rel=preconnect] 是否完成了它的工作？答案

【问题标题】：How can I check has link[rel=preconnect] done its job or not?我如何检查 link[rel=preconnect] 是否完成了它的工作？
【发布时间】：2017-02-16 22:09:54
【问题描述】：

我在页面的 HTML 代码中附加了 link[rel=preconnect]。但是如何检查是否预连接？

DevTools 的 Network 面板中没有出现 Preconnect，我在 chrome://tracing 中看不到它。

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

【问题讨论】：

这对于 Stack Overflow 来说并不是一个真正的好问题，因为它需要一个工具，但我认为像 Fiddler 之类的东西（无论如何在 Windows 上）将能够跟踪类似的东西。跨度>
我不确定这个工具是否是好的解决方案，因为很难区分预连接事件和对主机的第一个请求。
这里也有一些有用的建议：stackoverflow.com/questions/39629343

标签： html performance-testing web-performance

【解决方案1】：

您可以在https://www.webpagetest.org/创建的瀑布中看到它

这是一个例子：

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

【讨论】：

谢谢！但是，如果您的项目位于 Intranet 内，是否有一些方法可以检查预连接？
您可以尝试设置一个临时隧道，让网站在外部可用，我使用的是ngrok.com。但是您的主域和要预连接的域都必须可以访问。因此，如果您为第二个域建立隧道，则需要更改代码以使其指向新的隧道域。
另一种解决方案是在 Intranet 中设置您自己的 WebPageTest 私有实例。许多公司都有自己的实例，因此他们可以在将项目投入生产之前进行性能检查。

【解决方案2】：

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

【讨论】：