我怀疑我正在使用的rel-prefetch是否按预期执行 . 事实上，我没有在网页测试中看到dns部分与其余部分分开（因为它应该是）（参见https://stackoverflow.com/a/40380983/1467802或其中一个关于谷歌分析的图表https://christoph-rumpel.com/2013/04/front-end-performance-part-01-assets-loading/ loading）

View.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时，在网络选项卡中显示sdk.js的一行，但检查Timing详细信息，我看到dns就在rets之前，它们之间没有“间隙”，而且似乎没有发生好在休息之前应该有 .

如何以及在哪里发现Chrome Dev工具中的“dns预取” .

我在这里给出了fb脚本的例子，但对于我的其他脚本，它是同样的事情 .

javascript html google-chrome dns google-chrome-devtools