网址预解析(DNS Prefetching),让网站飞起来

网址预解析(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