【发布时间】：2018-07-20 09:34:53
【问题描述】：
我怀疑我使用的 rel-prefetch 是否真的按预期执行。事实上，我在网页测试中没有看到 dns 部分与该行的其余部分分开（参见https://stackoverflow.com/a/40380983/1467802 或此处关于谷歌分析https://christoph-rumpel.com/2013/04/front-end-performance-part-01-assets-loading/ 加载的图表之一）
查看.html
<link rel="dns-prefetch" href="https://connect.facebook.net" />
<link rel="dns-prefetch" href="https://www.facebook.com" />
<link rel="preconnect" href="https://connect.facebook.net" />
<link rel="preconnect" href="https://www.facebook.com" />
在我的页面中，我仅在用户单击按钮时才调用以下 facebook sdk
$('#button").on('click', function(e) {
window.fbAsyncInit = function() {
FB.init({
appId : fbAppId,
autoLogAppEvents : true,
status : false,
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id){
console.log('LIBRARY - Loading and initializing Facebook javascript SDK');
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk')
);
});
因此，当我加载页面并检查 Chrome 开发工具时，我期望看不到 sdk（这是意料之中的，因为它只会在我单击 #button 时加载），但至少在某处看到 dns 查找已经但我在“网络”选项卡和“性能”选项卡上都没有看到有关此预取请求的任何迹象/提示。 当我单击#button 时，在 Network 选项卡中出现 sdk.js 的一行，但检查 Timing 详细信息，我看到 dns 就在 rets 之前，它们之间没有“间隙”，而且似乎没有很好地发生在其余部分之前。
如何以及在何处发现 Chrome 开发工具中的“dns 预取”。
我在这里给出了 fb 脚本的例子，但对于我的其他脚本来说也是一样的。
【问题讨论】：
-
您可能需要查看
chrome://net-export/。 -
不知道这个工具。刚刚尝试过，非常强大的很多信息:) 我通过加载和记录然后分析网站的负载，用这个工具做了 2 次测试。这么奇怪。使用我的所有链接 rel dns-prefetch（其中一个用于 fb sdk）进行第一次测试：“DNS”选项卡在我将页面加载到 facebook.com 和 connect.facebook.net 时确实显示了 dns 请求。这很酷，因为在我点击按钮之前有一个 dns 调用（我没有点击），所以认为它正在工作；但后来我删除了所有 rel dns-prefetch，我仍然在 chrome 工具中找到 dns requets to fb...
-
在我点击按钮之前，它如何在第二个实验中向 facebook 发送 dns 请求？？？太奇怪了。我确定在单击按钮之前未加载由 javascript 实例化的 sdk，因为在此之前您看不到它出现在 chrome 开发工具网络选项卡上，但是当您单击时，您会看到它出现。所以js工作正常。
-
是否有可能 tjs js 加载速度如此之快以至于 js 代码实例化 fb.sdk 被解析并启动 dns requets 甚至在链接 rel-prefetch 之前（它位于我的 之上低于字符集标签）已达到...所以它启动“太快”？我会怀疑...
-
@JoshLee 重新尝试分析净出口数据，你是对的，它有效并证明只有当我有链接 rel dns-prefetch 时才进行 dns 调用。所以它证明了我的链接 rel dns-prefetch 工作。谢谢你的帮助。有一天可能会学习如何在 chrome 开发工具性能/时间线中发现 dns 请求，或者在那里看不到它们是正常的。由于您的答案是正确的，您能否将其作为答案，以便我可以给您一些 SO 点:)
标签： javascript html google-chrome dns google-chrome-devtools