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

时间：2016-09-22 02:33:57

标签： http dns prefetch

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

在我的情况下，我有一个单页应用程序，它在浏览器中呈现<body>的全部内容，因此浏览器无法真正扫描初始HTML以寻找要解析的域，所以看起来像这可能对我有用。

3 个答案:

答案 0 :(得分：5)

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

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

答案 1 :(得分：3)

为了仅确保功能在给定的浏览器中正常运行（非常综合测试），您可以执行以下操作

测试1：使用Chrome测试dns-prefetch（仅DNS）

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

    <!doctype html><html><head>
    <link rel="dns-prefetch" href="//ajax.googleapis.com">
</head><body></html>

  • 转到chrome://net-internals/#dns并清除主机缓存

  • 在http://localhost的Chrome中打开新标签页
  • 刷新chrome://net-internals/#dns并观察其是否具有DNS条目-这确认DNS解析已完成

测试2：使用Chrome和Fiddler（仅Windows）测试preconnect（DNS + TLS + TCP）

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

    <!doctype html><html><head>
    <link rel="preconnect" href="https://ajax.googleapis.com">
</head><body></html>

  • 转到chrome://net-internals/#dns并清除主机缓存

  • 启动Fiddler并使其监听流量
  • 在http://localhost的Chrome中打开新标签页
  • 观察Fiddler进行“到ajax.googleapis.com的隧道：443” 会话-这可以确认DNS解析和TLS握手已完成（您可能会信任它建立了一个也是TCP连接）

答案 2 :(得分：0)

要以一种非常细粒度且可自定义的方式测试对DNS时间的影响，这是另一种方法：HAR文件解析。

在打开网络面板的情况下加载站点，然后依次download the HAR file

以JSON格式读取该HAR文件（在具有readFile的Node中，或具有FileReader的浏览器中），最终将得到一个像这样的对象：

const har = {
  log: {
    version: {},
    creator: {},
    page: {},
    entries: {}, // <-- You want these
  }
}

然后，您可以查看har.log.entries[idx].timing.dns（并进行数学运算），因此您可以回答以下问题：

等待DNS提取花费了总时间？

const ms = har.log.entries.map(e => e.timing.dns).reduce(sum); // NOTE: should rm all the -1s
console.log('Total DNS Time: ' + ms);

// Total DNS Time: 242 ms

哪些请求完全在等待DNS？

const display = har.log.entries
  .filter(e => dnsTime(e) > 0)
  .map(e => ({
      method: e.request.method,
      url: e.request.url,
      dns: dnsTime(e),
    })
  );

console.table(display);
// Prints a nice table with things like: [GET foo.com 72ms]
相关问题
最新问题