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

Web质量优化类别 – 通过提前收获DNS来升高网页加载速度

2015/04/23 · HTML5 ·
DNS,
质量优化

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

本人时时寻觅办法改正网址质量,为的正是能提供更佳的用户体验。也许你平时会发觉你的网址运维高效且品质非凡。你也说不定曾让您的应用程序在Google
PageSpeed或Yahoo!
YSlow拓展测试,并拿走高分。不过,有平等东西一贯影响页面加载时间。它在贰个页面上,开销诸多时光去寻觅分歧组件的DNS。比方,上面那幅图片展现了自个儿的博客首页所需能源的加载瀑布图。

图片 1

请留意条形图的灰白灰部分,它出今后瀑布图中的大多数组件前。那灰石青代表下载能源前查找DNS所需时日。那竟是占了组件下载时间的很超过半数!即使组件进行了优化,并已经最小化/合并/压缩管理,你还是要求等待查找DNS时间。我利用webpagetest.org做了一个关于该网址DNS查找时间的报表。

图片 2

从上海教室可知到,DNS查找时间都非常高,
假诺能减弱该时间并提速,便会让财富加载变得更其便捷。幸运的是,有个很棒的本事能让网址的加载时间变得更加快。它被号称DNS预取,并且很轻松达成。你所需做的是,在网页顶部增多以下属性作为链接(link)。

<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

DNS预取是在用户尝试点击链接前试图解析域名。一旦域名被分析,且用户导航到该域名,则不会因DNS搜索而致使加载时间变长。在那个博客主页里,有大多跳转到分化帖子的链接。假若能在用户导航到下一个页前边,预取一些表面链接的DNS,这将会大大缩小下2个页面包车型大巴DNS查找时间。依照Chromium
documentation所说,假如用户能将域名解析成IP地址并且缓存之,则DNS查找时间能低至0-1纳秒(千分之1秒)。那是一定令人印象深远的!

小编在网址增多DNS预取作用后,确实能鲜明立异页面加载时间。近日,这项才具被超越二分一主流浏览器所援助(除了IE),所以,当前平昔不任何理由不在你的web应用上应用那项技巧!DNS预取是3个晋城的HTML5特征,它会被那么些不帮衬该才能的老旧浏览器轻松忽略掉。假使你的网页内容是源于多少个域名,那么那纯属是叁个精明能干的,能加速页面加载速度的艺术。

打赏支持小编翻译越多好文章,多谢!

打赏译者

打赏补助笔者翻译越多好小说,谢谢!

任选壹种支付办法

图片 3
图片 4

赞 1 收藏
评论

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

图片 5

前端,在路上…
个人主页 ·
笔者的小说 ·
19 ·
    

图片 6

相关文章