前端优化: DNS预解析提升页面速度

在网页体验中我们常会遇到这种情况,即在调用百度联盟、谷歌联盟以及当前网页所在域名外的域名文件时会遇到请求延时非常严重的情况。那么有没有方法去解决这种请求严重延时的现象呢?

一般来说这种延时的原因不会是对方网站带宽或者负载的原因,那么到底是什么导致了这种情况呢。湛蓝试着进行推测,假设是DNS的问题,因为DNS解析速度很可能是造成资源延时的最大原因。于是湛蓝在页面header中添加了以下代码(用以DNS预解析):

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
<link rel="dns-prefetch" href="http://nsclick.baidu.com" />
<link rel="dns-prefetch" href="http://hm.baidu.com" />
<link rel="dns-prefetch" href="http://eiv.baidu.com" />

效果很不错(测试浏览器为IE8),再打开其他页面时百度分享按钮的加载明显提高!

下面我们来简单了解一下 dns-prefetch:

DNS 作为互联网的基础协议,其解析的速度似乎容易被网站优化人员忽视。现在大多数新浏览器已经针对 DNS 解析进行了优化,典型的一次 DNS 解析耗费 20-120 毫秒,减少 DNS 解析时间和次数是个很好的优化方式。DNS Prefetching 是具有此属性的域名不需要用户点击链接就在后台解析,而域名解析和内容载入是串行的网络操作,所以这个方式能减少用户的等待时间,提升用户体验。

浏览器对网站第一次的域名DNS解析查找流程依次为:

浏览器缓存-系统缓存-路由器缓存-ISP DNS缓存-递归搜索
域名DNS解析查找流程

Chrome内置了DNS Prefetching技术, Firefox 3.5 也引入了这一特性,由于Chrome和Firefox 3.5本身对DNS预解析做了相应优化设置,所以设置DNS预解析的不良影响之一就是可能会降低Google Chrome浏览器及火狐Firefox 3.5浏览器的用户体验。
预解析的实现:

  1. 用meta信息来告知浏览器, 当前页面要做DNS预解析:
<meta http-equiv="x-dns-prefetch-control" content="on" />
  1. 在页面header中使用link标签来强制对DNS预解析:
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

注:dns-prefetch 需慎用,多页面重复DNS预解析会增加重复DNS查询次数。
PS:DNS 预解析主要是用于网站前端页面优化,在SEO中的作用湛蓝还未作验证,但作为增强用户体验的一部分 rel="dns-prefetch" 或许值得大家慢慢发现。

使用案例:
1、要出发遛娃攻略
2、要出发亲子游
等...

参考文章:百度泛用户体验-浏览器的加载与页面性能优化 http://www.baiduux.com/blog/2011/02/15/browser-loading/

推荐阅读更多精彩内容

  • 对浏览器原理有过了解的一定不会陌生这篇神文《How Browsers Work》中文翻译:浏览器原理:新式网络浏览...
    卐鑫卍阅读 36,409评论 4 102
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 166,634评论 24 703
  • 前言 前端的工作并不仅仅是实现「视觉&交互稿」,想要开发一个高性能易维护的「完美」站点并未易事,针对前端的性能优化...
    木羽zwwill阅读 465评论 0 4
  • 网站优化离不开前后端的互相协作,但是对于前端工程师来说,在保证后端技术方案不变时,能不能只利用前端技术来优化网站呢...
    留七七阅读 5,976评论 0 31
  • 需求描述: API服务器,采用异步IO实现并发,故每个API的执行需要非阻塞,否则会造成整个服务会不可用。有若干A...
    hmisty阅读 1,212评论 0 0
  • 出生于1932年的父亲,今年八十五岁。因为读书工作的原因,其实对父亲比较模糊,至少对其内心深处探寻不够,就像人类对...
    小小佘阅读 219评论 0 2
  • 英子嫁给林达七年了,两人有一个儿子小宝。转眼间小宝过五岁了。两个人的感情也从当初的卿卿我我浓情蜜意发展到现在的左手...
    亦为清心阅读 301评论 0 6
  • 我有一个故事,想讲给你听。 有一天,我喝醉了。 那天,月亮很圆很大,挂在天上, 清清凉凉的。 我一个人,端着酒杯,...
    善木阅读 341评论 0 2
  • 彼此看着的眼神里充满了爱和信心! 图片里的姿势之前,我正跟女儿随着英文儿歌跳舞,《one little finge...
    六维思享阅读 175评论 0 3