Web性能优化系列 – 通过提前获取DNS来提升网页加载速度

2015/04/23 · HTML5 ·
DNS,
性能优化

本文由 伯乐在线
刘健超-J.c
翻译,sunbiaobiao
校稿。未经许可,禁止转载!
英文出处:www.deanhume.com。欢迎加入翻译组

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

bet36365注册送奖金 1

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

bet36365注册送奖金 2

从上图可看到,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特性,它会被那些不支持该技术的老旧浏览器简单忽略掉。如果你的网页内容是来自多个域名,那么这绝对是一个聪明的,能加快页面加载速度的方法。

打赏支持我翻译更多好文章,谢谢!


打赏译者

这是一篇关于 <u>如何加快网站访问速度</u> 的译文,原文出自
雅虎开发者网站,原标题为
Best Practices for Speeding Up Your Web
Site

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

bet36365注册送奖金 3
bet36365注册送奖金 4

赞 1 收藏
评论

以下为译文:

关于作者:刘健超-J.c

bet36365注册送奖金 5

前端,在路上…http://jchehe.github.io
个人主页
·
我的文章
·
19
·
    

bet36365注册送奖金 6


发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图