网址预解析（DNS Prefetching），让网站飞起来

前段时间，博友询问我的网站速度为什么那么快？当时我只认为全部功劳得益于主机的强劲，完全没有想到在折腾过程中的一些额外处理，今天突然想起，就轻微分享一个小小技巧吧！

众所周知，网站加载速度的快慢是提升网站用户体验的重要一环，甚至决定网站的“生死”！那么问题来了，如何让网站加载速度更快，从而提升网站用户体验呢？即简单粗暴又行之有效！

简而言之，提前把需要加载的资源加载好，就可以轻松解决问题，切入主题：DNS Prefetching！

DNS Prefetching是什么？

DNS Prefetching就是为了加速DNS解析时间，它实现了预解析功能，从而减少后面资源的加载时间。

DNS Prefetching如何用？

非常简单，在网页头部（head之间）增加rel属性为”dns-prefetch”的link标签，并在href中指定想要预解析的域名。例如：

<meta http-equiv="x-dns-prefetch-control" content="on" /><!--可选-->
<link rel="dns-prefetch" href="//humicai.cn">

预加载的网址是我的七牛镜像存储，主要解决的是图片资源加载缓慢问题，其次CSS、JavaScript资源也轻松预加载完成，前后加载对比，速度提升非常明显！

当然，每个网站的资源加载网址可能不止一个，而是多个，当你的网站资源包含多个网址时，完全可以在网站头部（head之间）增加多个代码段。例如：

<meta http-equiv="x-dns-prefetch-control" content="on" /><!--可选-->
<link rel="dns-prefetch" href="//humicai.cn">
<link rel="dns-prefetch" href="//app.qlogo.cn"><!--预加载多说头像-->
<link rel="dns-prefetch" href="//ds.cdncache.org"><!--预加载多说头像-->

小小技巧，愿有成效，不妨一试，让网站飞起来！

参考资料：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Controlling_DNS_prefetching