How do you test the effects of dns-prefetch and pr

2019-02-16 17:03发布

站内问答 / 后端开发
1460 2 6

I'm trying out the <link rel="dns-prefetch"> and <link rel="preconnect"> tags and I'm trying to see whether they help for my site. I can't find any online resources about how verify if these hints are working using browser dev tools, extensions, or other software. It seems like you just evaluate whether they may be useful to you based on some criteria and then drop them in and hope for the best.

In my case, I have a single page app that renders the entire contents of the <body> in the browser, so the browser can't really scan the initial HTML to lookahead for domains to resolve so it seemed like this might be useful for me.

2条回答
贼婆χ
2楼-- · 2019-02-16 17:41

In order to just make sure that the features are working in a given browser (very synthetic test), you can do as follows

Test 1: test dns-prefetch (just DNS) with Chrome

  • serve the following HTML on localhost

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

  • go to chrome://net-internals/#dns and clear host cache

  • open new tab in Chrome on http://localhost
  • refresh chrome://net-internals/#dns and observe it to have the DNS entry - this confirms that DNS resolution has been done

Test 2: test preconnect (DNS+TLS+TCP) with Chrome and Fiddler (Windows-only)

  • serve the following HTML on localhost

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

  • go to chrome://net-internals/#dns and clear host cache

  • start Fiddler and make it listen to the traffic
  • open new tab in Chrome on http://localhost
  • observe Fiddler to have a "Tunnel to ajax.googleapis.com:443" session - this confirms that DNS resolution and TLS handshake were done (and you can probably trust the browser that it established a TCP connection too)
查看更多
0人赞 添加讨论(0) 举报
仙女界的扛把子
3楼-- · 2019-02-16 18:00

Run your page through webpagetest.org. Requests to the domains you specified in your dns-prefetch or preconnect tags should begin sooner because the initial connection will have been established.

This will show in the waterfall graph, for those requests - at the left of the bar the DNS, connect and SSL (if applicable) segments will detach from the response and move to the left in the waterfall, to reflect the fact that they occurred earlier.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)