Question

我怀疑我正在使用的rel-prefetch是否按预期执行。实际上，我没有在网页上看到dns部分与其余部分分开（请参阅https://stackoverflow.com/a/40380983/1467802或此处有关谷歌分析https://christoph-rumpel.com/2013/04/front-end-performance-part-01-assets-loading/加载的图表之一）< / p>

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 Dev Tools时，我希望不会看到sdk（因为它只会在我点击#button时才会加载），但至少要看到某个地方已经进行了dns查找，但我在“网络”选项卡上和“性能”选项卡上都没有看到有关此预取请求的任何符号/提示。当我点击#button时，在网络选项卡中显示sdk.js的一行，但检查时间详细信息，我看到dns就在rets之前，没有＆＃34; gap＆＃34;它们之间似乎并没有像它应该的那样在其余部分之前发生。

如何以及在何处发现这些＆＃34; dns预取＆＃34;在Chrome开发工具中。

我在这里给出了fb脚本的例子，但对于我的其他脚本来说，它是一样的。

Answer 1

在这里回答一个古老但仍然相关的问题。

您可以将“ Chrome网络日志导出”与“ netlog-viewer”结合使用。在他的博客Andy Davies wrote a great article中，介绍了如何执行此操作（以及其他一些分析预连接的方法）。

简短版本

在Chrome中打开一个新标签页，地址为chrome://net-export/
单击“开始将日志记录到磁盘”并选择日志文件的位置
将日志文件导入https://netlog-viewer.appspot.com/
打开“事件”标签
搜索“ HTTP_STREAM_JOB_CONTROLLER”条目以获取所需的URL
单击时，使用预连接时事件详细信息显示is_preconnect = true

Chrome开发工具 - 在哪里发现使用rel = dns-prefetch执行的dns预取

1 个答案: