如何测试dns-prefetch和preconnect的效果

web*_*wer 13 dns http prefetch

我正在尝试<link rel="dns-prefetch"><link rel="preconnect">标签,我正在试图看看它们是否对我的网站有所帮助.我找不到任何有关如何使用浏览器开发工具,扩展程序或其他软件验证这些提示是否有效的在线资源.您似乎只是根据某些标准评估它们是否对您有用,然后将它们放入并希望获得最佳效果.

在我的情况下,我有一个单页应用程序,它呈现<body>浏览器中的所有内容,因此浏览器无法真正扫描初始HTML以预测域要解析,所以看起来这似乎对我有用.

jak*_*b.g 7

为了确保功能在给定的浏览器中正常工作(非常综合的测试),您可以执行以下操作

测试 1:dns-prefetch使用 Chrome测试(仅 DNS)

  • 在本地主机上提供以下 HTML

    <!doctype html><html><head>
        <link rel="dns-prefetch" href="//ajax.googleapis.com">
    </head><body></html>
    
    Run Code Online (Sandbox Code Playgroud)
  • 转到chrome://net-internals/#dns并清除主机缓存

  • 在 Chrome 中打开新标签页 http://localhost
  • 刷新chrome://net-internals/#dns并观察它以获取 DNS 条目 - 这确认 DNS 解析已完成

测试 2:preconnect使用 Chrome 和 Fiddler测试(DNS+TLS+TCP)(仅限 Windows)

  • 在本地主机上提供以下 HTML

    <!doctype html><html><head>
        <link rel="preconnect" href="https://ajax.googleapis.com">
    </head><body></html>
    
    Run Code Online (Sandbox Code Playgroud)
  • 转到chrome://net-internals/#dns并清除主机缓存

  • 启动 Fiddler 并让它监听流量
  • 在 Chrome 中打开新标签页 http://localhost
  • 观察 Fiddler 是否有一个“Tunnel to ajax.googleapis.com:443”会话——这证实了 DNS 解析和 TLS 握手已经完成(并且你可能相信浏览器也建立了 TCP 连接)


mon*_*boy 5

通过webpagetest.org运行您的页面.对您在dns-prefetch或preconnect标记中指定的域的请求应该更快开始,因为初始连接已经建立.

这将在瀑布图中显示,对于那些请求 - 在条形图的左侧,DNS,连接和SSL(如果适用)段将从响应中分离并移动到瀑布的左侧,以反映它们发生的事实早.

  • 有没有办法在本地测试它?谢谢。 (2认同)