白及

有赞技术博客 • 0 回帖 • 3.5K 浏览 • 5 年前

预加载系列一：DNS Prefetching 的正确使用姿势

发现

很多人都知道现代浏览器都支持 DNS 的预解析，学名：DNS Prefetching。用法也很简单，就是在 html 代码里加入这样的 link 标签

<link rel="dns-prefetch" href="//delai.me">

我们之前的用法是在 Head 为 2 个静态资源服务器的域名和日志图片的域名建了 3 条 dns-prefetch link。

<link rel="dns-prefetch" href="//tj.koudaitong.com/" />
<link rel="dns-prefetch" href="//imgqn.koudaitong.com/" />
<link rel="dns-prefetch" href="//kdt-static.qiniudn.com/" />

我最近给移动 web 关键静态资源做 File Prefetching，顺手看了下 Chromium 和 Firefox 关于 DNS Prefetching 的官方文档看到这么一句：

Manual Prefetch

Chromium uses the “href” attribute of hyperlinks to find host names to prefetch. However, some of those hyperlinks may be redirects, for example if the site is trying to count how many times the link is clicked. In those situations, the “true” targeted domain is not necessarily discernible by examining the content of a web page, and so Chromium not able to prefetch the final targeted domain.

上面这段文字包含两个信息：

chrome 会自动把当前页面的所有带 href 的 link 的 dns 都 prefetch 一遍
需要手动添加 link 标签的场景是：你预计用户在后面的访问中需要用到当前页面的所有链接都不包含的域名

验证

我写了一个测试页面，代码是这样的：

<html>
<head></head>
<body>
    <a href="http://a.youzan.com">a.youzan.com</a>
    <a href="http://b.youzan.com">b.youzan.com</a>
    <a href="http://c.youzan.com">c.youzan.com</a>
    <a href="http://d.youzan.com">d.youzan.com</a>
</body>
</html>

在 chrome 里打开他，然后访问 chrome://histograms/DNS.PrefetchQueue ，看到如下统计结果

当然，上图并不能说明什么问题，只能看出：从启动 chrome 到访问刚刚这个测试页面，一共有 88 次 dns prefetching，其中 67 次直接命中耗时 0ms，有 4 词耗时 5ms。不过，如果把测试页面改成下面这个样子再跑一次就有点意思了：

<html>
<head></head>
<body>
    <a href="http://a.youzan.com">a.youzan.com</a>
    <a href="http://b.youzan.com">b.youzan.com</a>
    <a href="http://c.youzan.com">c.youzan.com</a>
    <a href="http://d.youzan.com">d.youzan.com</a>
    <a href="http://a1.youzan.com">a1.youzan.com</a>
    <a href="http://b1.youzan.com">b1.youzan.com</a>
    <a href="http://c1.youzan.com">c1.youzan.com</a>
    <a href="http://d1.youzan.com">d1.youzan.com</a>
    <a href="http://a2.youzan.com">a2.youzan.com</a>
    <a href="http://b2.youzan.com">b2.youzan.com</a>
    <a href="http://c2.youzan.com">c2.youzan.com</a>
    <a href="http://d2.youzan.com">d2.youzan.com</a>
    <a href="http://a3.youzan.com">a3.youzan.com</a>
    <a href="http://b3.youzan.com">b3.youzan.com</a>
    <a href="http://c3.youzan.com">c3.youzan.com</a>
    <a href="http://d3.youzan.com">d3.youzan.com</a>
    <a href="http://a4.youzan.com">a4.youzan.com</a>
    <a href="http://b4.youzan.com">b4.youzan.com</a>
    <a href="http://c4.youzan.com">c4.youzan.com</a>
    <a href="http://d4.youzan.com">d4.youzan.com</a>
</body>
</html>

统计结果变成了：

可以看出：因为页面里有 20 个 a 标签带 href 属性，chrome 做了 20 次 dns prefetching，其中耗时为 0 的次数比之前加了 4，那是因为头 4 个域名在上一次跑测试页面的时候已经被 prefetch 过了本地已经有记录，直接命中。其余的 16 个 dns prefetching 耗时基本上离散分布不甚相同。

结论

实际情况如文档所说，我的理解也是对，我们之前的使用姿势有点问题。

正确的使用姿势

1. 对静态资源域名做手动 dns prefetching。
2. 对 js 里会发起的跳转、请求做手动 dns prefetching。
3. 不用对超链接做手动 dns prefetching，因为 chrome 会自动做 dns prefetching。
4. 对重定向跳转的新域名做手动 dns prefetching，比如：页面上有个 A 域名的链接，但访问 A 会重定向到 B 域名的链接，这么在当前页对 B 域名做手动 dns prefetching 是有意义的。

其他

1. 假设页面 Head 里面有个 css 链接, 在当前页的 Head 里加上对应的手动 dns prefetching 的 link 标签，实际上并没有好处。

2. 普遍来说合理的 dns prefetching 能对页面性能带来 50ms ~ 300ms 的提升，有人做了这方面的统计。

3. 如 chromium 的官方文档所说，dns prefetching 的网络消耗是极低极低的：

Each request typically involves sending a single UDP packet that is under 100 bytes out, and getting back a response that is around 100 bytes. This minimal impact on network usage is compensated by a significant improvement in user experience.

4. 如 chromium 的官方文档所说，chrome 使用 8 个线程专门做 dns prefetching 而且 chrome 本身不做 dns 记录的 cache，是直接从操作系统读 dns —— 也就是说，直接修改系统的 dns 记录或者 host 是可以直接影响 chrome 的。

5. 手动 dns prefetching 的代码实际上还是会增加 html 的代码量的，特别是域名多的情况下。
所以，最优的方案应该是：通过 js 初始化一个 iframe 异步加载一个页面，而这个页面里包含本站所有的需要手动 dns prefetching 的域名。事实上，我们已经这么多了，稍后会再发一篇博文详细介绍。

本文也发布于我的
个人技术博客：http://delai.me/code/dns-prefetching/