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

2015-12-01 12:01  阅读 4,875 次 评论 21 条

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

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

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

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

当然,每个网站的资源加载网址可能不止一个,而是多个,当你的网站资源包含多个网址时,完全可以在网站头部(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

本文地址:https://humicai.cn/dns-prefetching.html
关注我们:请关注一下我们的微信公众号:扫描二维码轻微生活的公众号,公众号:kivilife
版权声明:本文为原创文章,版权归 胡敉才 所有,欢迎分享本文,转载请保留出处!

发表评论 取消回复


表情

  1. HappyDays
    HappyDays 【初级粉丝】 @回复

    怪不得博主的网站访问速度这么快,原来是有秘诀啊,哈哈哈哈,学习啦。

  2. 雅兮网
    雅兮网 【铁杆粉丝】 @回复

    你的这个代码高亮是插件还是纯代码实现的?

    • 轻微生活
      轻微生活【博主】2015-12-23 at 12:07  回复

      @雅兮网插件吧,因为我后台用的在线编辑器是Kindeditor for wordpress,本身引用了代码高亮的js库,实际也可以单独直接引用js库,折腾下不知可否,暂时还没有测试过[嘻嘻]

  3. 百乐趣事
    百乐趣事 【初级粉丝】 @回复

    预解析还不知道,了解一下……

  4. 项目管理李翔宇
    项目管理李翔宇 【高级粉丝】 @回复

    你也在阿里云免费的万网主机了?回头一起租云主机吧。

    • 轻微生活
      轻微生活【博主】2015-12-12 at 13:52  回复

      @项目管理李翔宇是的,看来李兄也是啊哈哈!
      其实1年前我买过新网的经济型云虚拟主机,
      之后才发现阿里云的万网免费主机的,
      而今天恰好是开通的最后期限,凌晨就开通了。
      我在想等我的万网免费主机到期了是续期还是搬家到新网的这款主机来[可爱]

  5. Han
    Han 【初级粉丝】 @回复

    又学会一招啊[哈哈]

  6. 墨白读书
    墨白读书 【初级粉丝】 @回复

    博主的博客确实快的很本地一样啦 是国内的主机吧

  7. Q叔
    Q叔 【初级粉丝】 @回复

    谢谢博主,又学会一招,不过对于主机自带cdn的我来说,不敢乱加cdn,怕混淆了

  8. 夏日博客
    夏日博客 【中级粉丝】 @回复

    想要网站加速,直接使用cdn。。

  9. 灰常记忆
    灰常记忆 【高级粉丝】 @回复

    还用多说 个人感觉太垃圾

  10. 慕云
    慕云 【中级粉丝】 @回复

    看起来很受用,我要试试[嘻嘻]

  11. 鲁洪
    鲁洪 【铁杆粉丝】 @回复

    [吃惊]和我的使用的云盾速度差不多。。唯一不同的是我的要付费 哎

    • 轻微生活
      轻微生活【博主】2015-12-01 at 15:31  回复

      @鲁洪付费,我是拒绝的,除非必需!唉、怎奈何,穷酸命,瞎折腾![嘻嘻]