百度360必应搜狗淘宝本站头条
tomcat 乱码无法与服务器建立安全连接是什么意思sysv-rc-confdocker映射容器目录到宿主机internet explorer 增强的安全配置已启用
当前位置：网站首页 > 技术文章 > 正文

前端性能优化系列——DNS预解析和优化

nanshan 2025-05-27 16:29 6 浏览 0 评论

简单来说，DNS 的作用是将域名解析为 IP 地址，解析的过程是耗时的，转化后会做本地缓存，我们的优化的目标主要是针对用户第一次访问站点的时候陷入长时间白屏的问题。

DNS 解析可以分为两类，第一类是页面 DNS 解析，当用户输入 url 地址后（比如是第一次访问站点），便开始页面 DNS 解析，这个过程是省不了的，因为你无法在用户访问站点之前就让他提前把 DNS 解析好；

第二类是其他资源的 DNS 解析，在浏览器解析 html 的时候，会遇到一些 script 元素、link 元素，此时会暂停 html 的解析，转而加载 JS，里面就包含了 DNS 解析，这个过程是耗时的，会阻塞浏览器渲染主线程，所以该如何进行优化呢？答案是采用 DNS 预解析！

一、DNS预解析是什么

DNS预解析（dns-prefetch ）是前端网络性能优化的一种措施，它根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，进而提高网站的访问速度。

DNS预解析能够让浏览器在用户访问链接之前解析域名，其范围包括文档的所有链接，包括图片、CSS、JS；域名解析后，如果用户确实访问该域名，那么DNS解析时间将不会有延迟。因为预读取会在后台执行，所以DNS很可能在链接对应的东西出现之前就已经解析完毕，这能够减少用户点击链接时的延迟。

二、DNS预解析的原理

当浏览器访问一个域名的时候，需要解析一次 DNS，获得对应域名的 ip 地址；在解析过程中，按照如下的顺序逐步读取缓存，直到拿到IP地址：

  • 浏览器缓存
  • 系统缓存
  • 路由器缓存
  • ISP(运营商)DNS缓存
  • 根域名服务器
  • 顶级域名服务器
  • 主域名服务器

dns-prefetch 就是在将解析后的IP缓存在系统中；这样就有效地缩短了 DNS 解析时间。因为在本地操作系统做了 DNS 缓存，使得 DNS 在解析的过程中，提前在系统缓存中找到了对应 IP；这样一来，后续的解析步骤就不用执行了，进而也就缩短了 DNS 解析时间。

假如浏览器首次将一个域名解析为 IP 地址，并缓存至操作系统，那么下一次 DNS 解析时间可以低至 0-1ms；倘若结果不缓存在系统，那么就需要读取路由器的缓存，进而后续的解析时间最小也要约 15ms

如果路由器缓存也不存在，则需要读取 ISP（运营商）DNS缓存，一般像 taobao.com、baidu.com 这些常见的域名，读取ISP（运营商）DNS 缓存需要的时间在 80-120ms，如果是不常见的域名，平均需要 200-300ms

那也就是说，dns-prefetch 可以给 DNS 解析过程带来 15-300ms 的提升，尤其是一些大量引用很多其他域名资源的网站，提升效果就更加明显了。

三、如何开启DNS预解析

在 HTML 的 head 部分添加以下代码来启用 DNS 预解析，href 属性指定了需要预解析的主机名：

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

需要注意的是，dns-prefetch 仅对跨域域上的 DNS 查找有效，因此请避免使用它来指向相同域

HTTP 页面下所有的 a 标签的 href 都会自动去启用 DNS Prefetch，也就是说，你网页的 a 标签 href 带的域名，是不需要在 head 里面加上 link 手动设置的。

四、开启DNS预解析的前后对比

准备了一个例子，使用了掘金 logo 的地址，预解析该图片所在域名 dns，然后在点击切换按钮的时候把当前图片替换成掘金 logo

点击切换按钮，查看 network 该图片请求的 Timing，发现少了一个 DNS 解析阶段：

再来看看不开启预解析 dns 的情况：

结果如下，多了 dns 解析这一阶段：

继续点击切换，请求如下，dns 解析、建立连接时间(Socket) + SSL认证时间都没有：

其实就等于 preconnect（dns 解析、建立连接时间(Socket) + SSL认证时间都提前）：

 <link rel="preconnect" href="https://lf-cdn-tos.bytescm.com/">

五、项目中使用DNS预解析

在项目中我们可能会遇到一个问题，就是很多地方使用到了第三方的外链，比如图片、CSS、JS，由于项目是团队开发，有时候还不知道项目哪些地方引用了第三方的外链，所以我们不可能通过 link 标签的形式将这些第三方外链一个个引入并开启 DNS 预解析。

这个时候需要写一个插件去帮我们查找项目中所有的引入的第三方外链，在网上搜了下找不到满足需求的插件，只能自己写了，由于 Vite 项目使用 rollup 打包的，而 Vue-cli 项目用的是 webpack，不同的工具打包机制是不一样的，所以不采用插件的形式，在运行打包命令的时候运行一段代码，去修改打包的结果，这里以 Vite 工程为例：

// package.json
"scripts": {
"build": "vite bulid && node ./scripts/dns-prefetch.js"
}

具体的代码如下，简单来说就是，遍历打包后的 dist 目录中的所有 HTML、JS、CSS 文件，将所有外链的域名存起来，然后在 dist 目录下 index.html 文件的 head 标签中依次插入 link 标签，同时开启 DNS 预解析：

// dns-prefetch.js
const fs = require('fs')
const path = require('path')
const { parse } = require('node-html-parser')
const { glob } = require('glob')
const urlRegex = require('url-regex')

// 获取外部链接的正则表达式
const urlPattern = /(https?:\/\/[^/]*)/i
const urls = new Set()

// 遍历dist目录中的所有HTML、JS、CSS文件
async function searchDomin() {
const files = await glob('dist/**/*.{html,css,js}')
for (const file of files) {
const source = fs.readFileSync(file, 'utf-8')
const matches = source.match(urlRegex({ strict: true }))
if (matches) {
matches.forEach((url) => {
const match = url.match(urlPattern)
if (match && match[1]) {
urls.add(match[1])
}
})
}
}
}

// 在index.html文件<head>标签中插入link标签
async function insertLinks() {
const files = await glob('dist/**/*.html')
const links = [...urls].map((url) => `<link rel="dns-prefetch" href="${url}" />`).join('\n')

for (const file of files) {
const html = fs.readFileSync(file, 'utf-8')
const root = parse(html)
const head = root.querySelector('head')
head.insertAdjacentHTML('afterbegin', links)
fs.writeFileSync(file, root.toString())
}
}

async function main() {
await searchDomin()
await insertLinks()
}

main()


作者：前端掘金者H
链接：
https://juejin.cn/post/7285915718667124771

相关推荐

python获取阿里云云解析dns的域名解析记录

最近由于工作原因接触到阿里云的服务，我需要实时获取所有的域名信息，用于对其进行扫描，因此写了一个自动化爬取脚本给需要的人分享。（阿里云有官方的demo，有兴趣的可以自己看一下，后面也会放链接，我只能...

前端性能优化系列——DNS预解析和优化

简单来说，DNS的作用是将域名解析为IP地址，解析的过程是耗时的，转化后会做本地缓存，我们的优化的目标主要是针对用户第一次访问站点的时候陷入长时间白屏的问题。DNS解析可以分为两类，第一类是页...

dns错误修复方法

　　最近用户反馈在同一网络的其他电脑可以正常上网，但自己的电脑却提示页面找不到且无法解析服务器的dns地址，接下来给大家带来dns错误修复方法。　　1、点击网络图标，选择打开网络共享中心，如图所示：　...

技术分享 | 浅谈DNS递归解析和迭代解析之间的区别

DNS解析是互联网中的重要环节，承担着将域名翻译为可由计算机直接读取的IP地址的基础功能。根据查询对象不同DNS解析可分为递归解析和迭代解析两种方式，接下来，中科三方将简单介绍下两种查询方式的流程以及...

一文读懂DNS解析故障常见情况(中科三方)

DNS解析将人们习惯使用的域名翻译成计算机识别的IP地址，是确保人们正常访问网站的重要功能。而在实际域名管理过程中，经常会因为种种原因导致DNS解析故障。DNS解析故障主要表现在人们通过IP地址可以直...

DNS分离解析实验

如果本文对你有帮助，欢迎关注、点赞、收藏、转发给朋友，让我有持续创作的动力目录一、分离解析概述二、实验需求三、实验步骤3.1双网卡服务器配置3.1.1添加两张网卡（内外网）3.1.2对两个网卡进...

#净网2019# 浏览网页被“劫持”，有问题!

明明自己没有设置过，打开网页浏览器却直接到了一个陌生网站，想改回原来的主页设置颇费周折、甚至无能为力。很多网民有过类似经历：在安装了一些软件后，自己的浏览器主页就被修改和锁定。本来打算访问A网站却被强...

解决浏览器劫持，360和腾讯安全不敌火绒专杀

上午win7莫名其妙显示未激活，并要求当日必须激活，没办法，上网找激活工具，先试了“小马”没起作用，又下载了“WIN7ActivationV2.3绿色版”，就是这个：激活是激活了，顺便给我安了一堆垃...

【净网2019】 浏览网页被“劫持”，有问题!

明明自己没有设置过，打开网页浏览器却直接到了一个陌生网站，想改回原来的主页设置颇费周折、甚至无能为力。很多网民有过类似经历：在安装了一些软件后，自己的浏览器主页就被修改和锁定。本来打算访问A网站却被...

浏览器打开网页被绑架?这里有办法

最近小A遇到了一个小问题：在240g上网冲浪的时候，搜索到的网页，点进去却“李逵变李鬼”？？？在使用浏览器时，点击搜寻结果却导向与搜寻内容不符合的网站，表示您的浏览器可能已遭受恶意软件劫持。例如您在搜...

处理浏览器主页被劫持的最新方法

给大家说个处理浏览器主页被劫持的最新方法：刚遇件让人哭笑不得的事，这两天发现浏览器的主页打开后不是自己原来设置的，而是hao123，一百度，好家伙，原来这个流氓许多人都遇到过，照着大家分享的方法一一尝...

软件性能测试详解

性能测试的基本概念性能测试是一种非功能性测试，通过自动化工具模拟多种负载条件（正常、峰值、异常），对系统的各项性能指标进行测试和评估，以验证其是否满足预期的性能需求。以下是核心概念的详细解析：一、性能...

国内粉色图标视频网站偷用带宽风波，WebRTC Control 插件来救场

最近，B站陷入了一场舆论风波，被指偷偷使用用户上传带宽。有网友在浙江大学论坛投稿称，B崭新版App疑似未经许可大量上传数据致网络卡顿，查看路由器统计信息后，发现B站手机客户端开启大量端口，...

服务器知识

问：机架式和非机架式是什么意思？服务器中“U”是什么单位？答：机架式、非机架式指的是服务器的类型。机架式是指可以直接插入机柜的标准服务器。非机架式是其他类型的服务器。譬如说我们普通的pc机的主机。大小...

Vue3 性能拉胯?5 个实战技巧让项目响应速度飙升 60%!

作为前端工程师，在开发Vue3项目时，你是否经常遇到页面卡顿、数据更新缓慢，导致用户体验直线下降的情况？看着自己精心搭建的应用，因为性能问题被吐槽，真是既无奈又焦虑。别担心，今天就分享5个超级...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表