我时常寻找方法改善网站性能，为的就是能提供更佳的用户体验。也许你经常会发现你的网站运行高效且性能优异。你也可能曾让你的应用程序在Google PageSpeed或Yahoo! YSlow进行测试，并得到高分。然而，有一样东西一直影响页面加载时间。它在一个页面上，花费很多时间去查找不同组件的DNS。例如，下面这幅图片展示了我的博客首页所需资源的加载瀑布图。

请注意条形图的灰蓝色部分，它出现在瀑布图中的大部分组件前。这灰蓝色代表下载资源前查找DNS所需时间。这竟然占了组件下载时间的很大部分！即使组件进行了优化，并已经最小化/合并/压缩处理，你仍然需要等待查找DNS时间。我利用webpagetest.org做了一个关于该网站DNS查找时间的表格。

从上图可看到，DNS查找时间都很高， 如果能减少该时间并提速，便会让资源加载变得更加高效。幸运的是，有个很棒的技巧能让网站的加载时间变得更快。它被称为DNS预取，并且很容易实现。你所需做的是，在网页顶部添加以下属性作为链接(link)。

<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

DNS预取是在用户尝试点击链接前试图解析域名。一旦域名被解析，且用户导航到该域名，则不会因DNS查找而导致加载时间变长。在这个博客主页里，有很多跳转到不同帖子的链接。如果能在用户导航到下一个页面前，预取一些外部链接的DNS，这将会大大减少下一个页面的DNS查找时间。根据Chromium documentation所说，如果用户能将域名解析成IP地址并且缓存之，则DNS查找时间能低至0-1毫秒（千分之一秒）。这是相当令人印象深刻的！

我在网站添加DNS预取功能后，确实能显著改善页面加载时间。目前，这项技术被大多数主流浏览器所支持(除了IE)，所以，当前没有任何理由不在你的web应用上使用这项技术！DNS预取是一个安全的HTML5特性，它会被那些不支持该技术的老旧浏览器简单忽略掉。如果你的网页内容是来自多个域名，那么这绝对是一个聪明的，能加快页面加载速度的方法。