性能优化 - 你知道dns-prefetch有什么用吗

最新推荐文章于 2025-04-13 17:33:44 发布

经海路大白狗

最新推荐文章于 2025-04-13 17:33:44 发布

阅读量554

点赞数

分类专栏： WEB前端最新面试题 - 又全又卷文章标签：性能优化

本文链接：https://blog.youkuaiyun.com/xingyu_qie/article/details/137500789

版权

WEB前端最新面试题 - 又全又卷专栏收录该内容

93 篇文章

订阅专栏

难度级别：中级及以上提问概率：50%

我们在HTML文档里写一个script标签，为src属性指定Javascript文件网络地址，这是一件再平凡不过的事情。当浏览器加载HTML文档，加载到这个script标签的时候，就会去下载Javascript文件。而在下载之前，就需要知道文件部署的服务器在哪里，几乎所有的Javascript文件地址都是采用网络协议加域名的形式，而非网络协议加IP地址的形式，所以浏览器下载Javascript文件之前非常重要的一件事就是，对域名做DNS解析，从而获得域名对应的IP地址。

为了访问DNS服务，通过域名获取IP地址，浏览器需要从当前客户端的系统、距离最近的路由器甚至是运营商的DNS缓存服务去依次查询，所以这个查询过程还是比较耗时的。为了减少因DNS解析所带来的网络延迟，我们需要采用dns-prefetch预解析的方式，提前对跨域的Javascript文件的域名进行预解析。如果当前网站的访问路径为https://www.test.com，那么使用dns-prefetch预解析的代码就像这样

HTML代码：
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name=" viewport" content="width=device-width initial-scale=1.0 minimum-scale=1.0 miximum=1.0 user-scalable=no"/>
	<title>React项目</title>
    <link rel="dns-prefetch" href="//a.test1.com"/></head>
<body>
    <div id="app"></div>
    <script src="//a.test1.com/vendors.js"></script>
    <script src="//a.test1.com/app.js"></script>
</body>
</html>

以上代码中，采用了dns-prefetch预解析后，可以将解析后的IP地址缓存在系统里。这样当HTML文档加载到底部真正需要下载Javascript文件的时候，就不需要一步一步的去路由器或者运营商的DNS服务器去查询IP地址了，可以说缩减了非常多的时间。像Chrome这种现代浏览器，也添加了DNS缓存功能，这样经常访问的域名甚至都不需要去系统的DNS缓存中查找IP地址，从而获得更快的访问速度。

不过需要注意的是，dns-prefetch预解析针对的是跨域Javascript文件，也就是说Javascript文件的域名与当前网站访问的域名是不同的，才会有效果。因为当浏览器加载到dns-prefetch预解析这一行代码的时候，当前网站域名的IP地址早已经被解析完成了。

刷题思考

dns预解析这个考点在面试中很重要，属于前端优化的重要组成部分，而且这个知识点还及其容易被忽视。因为在日常项目开发中，很多时候大家会把工作中心放到业务开发中，很少涉及到HTML页面部分的改动，又或者遇到新项目会直接通过脚手架生成HTML文档，所以dns预解析这一部分又非常容易被忽略。

回答本题有3个要点，第一是如何使用，第二是dns预解析的原理，第三是针对跨域的域名有效，本小节都已给出了解析。

类似考点

如果你已经掌握了本小节的知识点，那么面试官很可能还会提出以下问题，例如你

dns-prefetch和preload的区别吗？你知道对与站点相同域名做dns-prefetch预解析处理，有什么缺点吗？