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

Posted 2021-04-30 前端大全

(点击 上方蓝字 ，可快速关注我们)

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

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

从上图可看到，DNS查找时间都很高， 如果能减少该时间并提速，便会让资源加载变得更加高效。幸运的是，有个很棒的技巧能让网站的加载时间变得更快。它被称为DNS预取，并且很容易实现。你所需做的是，在网页顶部添加以下属性作为链接(link)。

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

我在网站添加DNS预取功能后，确实能显著改善页面加载时间。目前，这项技术被大多数主流浏览器所支持(除了IE)，所以，当前没有任何理由不在你的web应用上使用这项技术！DNS预取是一个安全的html5特性，它会被那些不支持该技术的老旧浏览器简单忽略掉。如果你的网页内容是来自多个域名，那么这绝对是一个聪明的，能加快页面加载速度的方法。

原文出处：www.deanhume.com

译文出处：伯乐在线 - J.c

链接：http://web.jobbole.com/82358/

---

1.『前端大全』分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯，相关职位。欢迎关注。

http://web.jobbole.com/all-posts/

2. 点击“阅读原文”，查看更多前端文章。