当前位置： 首页 > news >正文

【性能优化】DNS解析优化

news 2026/3/27 18:31:43

前言

  • DNS解析过程消耗时间
  • DNS有本地缓存

比如首次访问某站点，会耗费很多时间进行DNS解析，但解析结束后会将ip地址存入本地设备，后续再访问此域名时就会直接从缓存中取。

首次访问页面时，本页面的DNS解析是无法优化的，但是页面中可能用到其他域名下的资源，如css、图片、js等，可以通知浏览器提前对这些资源进行异步DNS解析。

在这里插入图片描述

实现

以下代码引入了其他域名下的资源，需要在head中添加link进行dns预解析，格式如下：

<link rel="dns-prefetch" href="https://www.xxx.com">

<!DOCTYPE html>
<html lang="en"><head><link rel="dns-prefetch" href="https://www.abc.com"><link rel="dns-prefetch" href="https://www.aaa.com"><link rel="dns-prefetch" href="https://www.tes.com"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {background: url('https://www.abc.com/imgs/main-bg');}</style>
</head><body><div class="container"><img src="https://www.aaa.com/img/32fd.jpg" alt=""></div><script src="https://www.tes.com/sss.js"></script>
</body></html>

框架内实现

但是合作开发模式下，站外资源的引用会分散到很多组件中，难以集中控制且由于是手动写死的地址，也会提高维护成本。

本文提供两种方式，分别为手写js实现以及vite插件，如果想将js插件发布到npm可以看另一篇文章：如何将自己的插件发布到npm上。

方式一：手写js实现

标准的做法应该是根据构建工具写一个插件，如vite用的rollup，就要写一个rollup插件，但是本文通过node实现。

首先需要实现分析打包结果中的js，取出站外资源对应域名，并动态添加link标签到html的head中。

在这里插入图片描述

新建js用于动态插入link

项目中新建scripts目录，

确保项目中有如下插件

npm install node-html-parser
npm install glob
npm install url-regex

dns-prefetch.cjs代码内容如下：

// 该node文件：识别打包结果中的站外资源地址并动态插入index.html中link实现dns-prefetch，提高渲染速度
// 调用方式：node ./scripts/dns-prefetch.jsconst fs = require("fs")
const path = require("path")
const { parse } = require("node-html-parser") // 可以脱离浏览器环境将html字符串解析成HTML节点
const { glob } = require("glob")
const urlRegex = require("url-regex") // 可以分析文件中所包含的url
const { strict } = require("assert")const urlPattern = /(https?:\/\/[^/]*)/i // 获取外部链接
const urls = new Set() // url集合// 遍历dist目录中的所有 HTML 文件
async function searchDomain() {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]) // 将域名加到Set中}})}}
}// 将遍历好的所有域名生成link预解析标签并插入到index.html中
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(), "utf-8")}
}async function main() {await searchDomain()await insertLinks()
}main()

package.json中在打包处理后执行该js

"scripts": {"dev": "vite","build": "vite build && node ./scripts/dns-prefetch.cjs","preview": "vite preview"
},

&&的意义：如 vite+ts 项目默认打包为："build": "tsc && vite build"，意为先进行ts语法检查，再打包，如果语法检查错误则立即停止。所以此处将自定义js放到打包后执行。

查看dist中index.html，发现link已经插入。

在这里插入图片描述

方式二：vite-plugin-prefetch-dns插件

npm install vite-plugin-prefetch-dns

import { defineConfig } from 'vite';
import prefetchDns from 'vite-plugin-prefetch-dns';export default defineConfig({plugins: [...其他插件prefetchDns()]
});

执行npm run build，打包完毕后看到正确插入link标签。

相关文章：

【性能优化】DNS解析优化

前言 DNS解析过程消耗时间DNS有本地缓存 比如首次访问某站点&#xff0c;会耗费很多时间进行DNS解析&#xff0c;但解析结束后会将ip地址存入本地设备&#xff0c;后续再访问此域名时就会直接从缓存中取。 首次访问页面时&#xff0c;本页面的DNS解析是无法优化的&#xff0…...

编程日记 2024/8/15 23:07:03

【剑指 offer】合并链表

目 录 描述&#xff1a; 输入两个递增的链表&#xff0c;单个链表的长度为 n&#xff0c;合并这两个链表并使新链表中的节点仍然是递增排序的。 思路&#xff1a; 定义一个新链表&#xff0c;先进行我们的原俩链表判断&#xff0c;然后比较俩链表的每个节点大小&#xff0c;然…...

编程日记 2024/8/15 23:06:02

红酒与节日装饰：打造节日氛围的需备品

随着节日的脚步渐渐临近&#xff0c;节日的氛围也愈发浓厚。在这个特殊的时刻&#xff0c;红酒与节日装饰无疑成为了营造节日氛围的需备品。洒派红酒&#xff08;Bold & Generous&#xff09;作为定制红酒的品牌&#xff0c;其不同的韵味与节日装饰的精致整合&#xff0c;共…...

编程日记 2024/8/15 23:05:01

Element Plus的el-carousel走马灯平铺多张图片

效果 <template><div class"system-banner"><el-carousel height"320px" indicator-position"outside" :autoplay"false"><el-carousel-item v-for"(item, index) in govList" :key"index"…...

编程日记 2024/8/15 23:04:00

【promise】Promise的几个关键问题 （三）

Ⅰ-如何改变 promise 的状态? (1) resolve(value): 如果当前是 pending 就会变为 resolved (2) reject(reason): 如果当前是 pending 就会变为 rejected (3) 抛出异常: 如果当前是 pending 就会变为 rejected Ⅱ-一个 promise 指定多个成功/失败回调函数, 都会调用吗? 当 pro…...

编程日记 2024/8/15 23:02:57

利用ZXing.Net Bindings for EmguCV识别条形码及绘制条形码边框17(C#)

上一篇博文&#xff1a;绘制条形码的效果不是很好&#xff1a;利用Emgucv绘制条形码边框16(C#)-CSDN博客 测试环境&#xff1a; win11 64位操作系统 visual studio 2022 ZXing.Net.Bindings.EmguCV 0.16.4 测试步骤如下&#xff1a; 1 新建.net framework 4.8的控制台项目…...

编程日记 2024/8/15 23:01:56

IP代理如何增强网络安全性？

在当今的数字时代&#xff0c;网络安全已成为一个关键问题&#xff0c;而使用 IP 代理可以成为增强网络安全的有效方法。根据请求信息的安全性&#xff0c;IP 代理服务器可分为三类&#xff1a;高级匿名代理、普通匿名代理和透明代理。此外&#xff0c;根据使用的用途&#xff…...

编程日记 2024/8/15 22:58:42

NDP（Neighbor Discovery Protocol）简介

定义 邻居发现协议NDP&#xff08;Neighbor Discovery Protocol&#xff09;是IPv6协议体系中一个重要的基础协议。邻居发现协议替代了IPv4的ARP&#xff08;Address Resolution Protocol&#xff09;和ICMP路由设备发现&#xff08;Router Discovery&#xff09;&#xff0c;…...

编程日记 2024/8/15 22:57:40

为何要隐藏源 IP 地址？

概述 在网络世界中&#xff0c;服务器的安全至关重要。一旦服务器遭受黑客攻击&#xff0c;采取正确的防御措施是防止进一步损害的关键。其中一项重要的策略就是隐藏服务器的真实 IP 地址。本文将探讨隐藏源 IP 地址的重要性&#xff0c;并提供一些实用的方法来实现这一目标。…...

编程日记 2024/8/15 22:56:39

目前最流行的前端构建工具，你知道几个？

现在的市面上有很多不同的前端构建工具&#xff0c;我们很难对它们一一进行关注。在本文中&#xff0c;我们将重点介绍最受欢迎的几种&#xff0c;并探讨开发人员喜欢或不喜欢它们的原因。 Webpack Webpack 是一个模块打包器&#xff0c;主要用于处理 Web 应用程序的资源的优化…...

编程日记 2024/8/15 22:55:39

C++函数模板温习总结

函数模板 // 1、typename 在这里是类型重定义(typedef)&#xff0c;而不是宏替换(#define) //2、模板的非类型参数&#xff0c;属性为const &#xff0c; 不允许修改 //3、函数模板不允许部分特例化&#xff0c;类模板可以 //4、模板函数和非模板函数重载&#xff0c;优先调用…...

编程日记 2024/8/15 22:54:37

【网络】套接字(socket)编程——TCP版

接着上一篇文章&#xff1a;http://t.csdnimg.cn/GZDlI 在上一篇文章中&#xff0c;我们实现的是UDP协议的&#xff0c;今天我们就要来实现一下TCP版本的 接下来接下来实现一批基于 TCP 协议的网络程序&#xff0c;本节只介绍基于IPv4的socket网络编程 基于 TCP 的网络编程开…...

编程日记 2024/8/15 22:53:36

水凝胶生物打印是什么？如何指导Organoids培养？有啥好处？

大家好&#xff0c;我们来了解这篇《Hydrogel-in-hydrogel live bioprinting for guidance and control of organoids and organotypic cultures》发表在《Nature Communications》的一篇文章。三维水凝胶基器官样培养&#xff0c;如类器官和体外器官型培养&#xff0c;能够自我…...

编程日记 2024/8/15 22:51:34

从springBoot框架服务器上下载文件 自定义一个启动器

在springboot框架中下载服务器存储的图片&#xff1a; 1&#xff09;springboot默认访问放行的目录只有static&#xff0c;在static目录下存放图片资源 2&#xff09;编译后的static目录中有一个1.png 2.5)编写控制器&#xff1a; Controller //RequestMapping("/upload&q…...

编程日记 2024/8/15 22:50:33

某通电子文档安全管理系统 CDGAuthoriseTempletService1接口SQL注入漏洞复现 [附POC]

文章目录 某通电子文档安全管理系统 CDGAuthoriseTempletService1接口SQL注入漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现0x06 修复建议某通电子文档安全管理系统 CDGAuthoriseTempletService1接口SQL注入漏…...

编程日记 2024/8/15 22:49:31

pythonselenium自动化测试实战项目（完整、全面）

前言 之前的文章说过&#xff0c; 要写一篇自动化实战的文章&#xff0c; 这段时间比较忙再加回家过11一直没有更新博客&#xff0c;今天整理一下实战项目的代码共大家学习。&#xff08;注:项目是针对我们公司内部系统的测试&#xff0c;只能内部网络访问&#xff0c;外部网络…...

编程日记 2024/8/15 22:48:30

如何选择合适的虚拟机软件？对比Parallels Desktop 和VMware Fusion 使用虚拟机畅玩黑神话悟空

随着技术的发展&#xff0c;虚拟机软件将更加高效地管理和分配系统资源。虚拟机软件扮演着越来越重要的角色。无论是软件开发者需要测试不同操作系统环境下的应用&#xff0c;还是普通用户希望在一台机器上同时运行多个操作系统&#xff0c;虚拟机软件都是不可或缺的工具。那么…...

编程日记 2024/8/15 22:46:27

ESP32FreeRTOS开发笔记：2.定义、多任务与优先级调度

FreeRTOS 是一种实时操作系统（RTOS），专门用于嵌入式系统。它之所以被称为 "FreeRTOS"，是因为它是一个免费和开源的 RTOS。下面我们具体讨论一下 FreeRTOS 与 RTOS 的区别，以及 "free" 的含义。 一、什么是 RTOS？ RTOS，全称 Real-Time Operating Sy…...

编程日记 2024/8/15 22:43:23

【Python-办公自动化】1秒比较出2张表格之间的不同并标黄加粗

欢迎来到"花花 Show Python"&#xff0c;一名热爱编程和分享知识的技术博主。在这里&#xff0c;我将与您一同探索Python的奥秘&#xff0c;分享编程技巧、项目实践和学习心得。无论您是编程新手还是资深开发者&#xff0c;都能在这里找到有价值的信息和灵感。 自我介…...

编程日记 2024/8/15 22:41:21

Linux下查看各进程的swap

cat /etc/re*se Red Hat Enterprise Linux Server release 6.8 (Santiago) 简单的可以通过top命令查看 top 后 按 f 进入选择列界面 按 p 就会输出swap信息&#xff08;变为P&#xff09; 回车返回看到SWAP信息了 再按 F 再按p 按swap排序 再回车后就是各进程按swap排序…...

编程日记 2024/8/15 22:40:19

手把手拆解：一个QKD系统中的‘诱骗态’光源硬件是怎么搭出来的？

手把手拆解&#xff1a;一个QKD系统中的‘诱骗态’光源硬件是怎么搭出来的&#xff1f; 量子密钥分发&#xff08;QKD&#xff09;技术近年来从实验室走向商业化应用&#xff0c;其中诱骗态光源的设计与实现成为工程落地的核心挑战之一。不同于理论论文中简化的模型&#xff0c…...

编程新知 2026/3/27 18:22:15

AutoUnipus：重新定义U校园学习效率的智能解决方案

AutoUnipus&#xff1a;重新定义U校园学习效率的智能解决方案 【免费下载链接】AutoUnipus U校园脚本,支持全自动答题,百分百正确 2024最新版 项目地址: https://gitcode.com/gh_mirrors/au/AutoUnipus 还在为U校园平台上堆积如山的网课任务而焦虑吗&#xff1f;每天花费…...

编程新知 2026/3/27 18:08:09

Llama-3.2V-11B-cot企业级应用：双卡4090支撑的生产环境视觉推理服务搭建

Llama-3.2V-11B-cot企业级应用&#xff1a;双卡4090支撑的生产环境视觉推理服务搭建 1. 项目概述 Llama-3.2V-11B-cot是基于Meta最新多模态大模型开发的高性能视觉推理工具&#xff0c;专为企业级生产环境设计。该工具针对双卡NVIDIA RTX 4090环境进行了深度优化&#xff0c;…...

编程新知 2026/3/27 18:04:06

ROS Noetic下大陆ARS408雷达点云数据解析：从CAN原始帧到RVIZ可视化，一个脚本全搞定

ROS Noetic下大陆ARS408雷达点云数据全链路解析与自动化实践 毫米波雷达在自动驾驶、机器人导航等领域扮演着关键角色。大陆ARS408作为一款高性价比的毫米波雷达&#xff0c;其点云数据的获取与可视化是许多开发者需要掌握的核心技能。本文将带您从底层CAN总线通信开始&#xf…...

编程新知 2026/3/27 15:45:08

2026降AI率工具红黑榜：降AI率网站怎么选？看完少走弯路

千笔AI、ThouPen、豆包位列红榜&#xff0c;精准适配国内高校AI率检测规范&#xff1b;黑榜需避开低质免费工具、无正规检测对接平台及改写痕迹明显的工具&#xff1b;选择时应优先匹配三维模型&#xff1a;降AI效果-学术合规性-使用成本。 一、红榜&#xff1a;10 款高分论文降…...

编程新知 2026/3/27 15:43:03

Python实战：两步移动搜索法（2SFCA）在医疗资源可达性分析中的应用

1. 什么是两步移动搜索法&#xff08;2SFCA&#xff09;&#xff1f; 第一次听说两步移动搜索法&#xff08;2SFCA&#xff09;时&#xff0c;我完全被这个专业名词唬住了。后来在实际项目中用了才发现&#xff0c;它其实就是个"找资源"的聪明算法。想象一下你住在一…...

编程新知 2026/3/27 14:20:23

小白也能懂：Qwen3-TTS-Tokenizer-12Hz的API调用与Python示例

小白也能懂&#xff1a;Qwen3-TTS-Tokenizer-12Hz的API调用与Python示例 1. 前言&#xff1a;音频编解码器能做什么&#xff1f; 想象一下&#xff0c;你录制了一段重要的会议录音&#xff0c;文件大小有50MB&#xff0c;想通过微信发给同事&#xff0c;却发现超过了文件大小…...

编程新知 2026/3/27 14:01:16

Qwen3-ForcedAligner-0.6B生产环境：支持日均1000+分钟音频批处理任务

Qwen3-ForcedAligner-0.6B生产环境&#xff1a;支持日均1000分钟音频批处理任务 1. 项目概述 Qwen3-ForcedAligner-0.6B是一款基于阿里巴巴先进语音识别技术开发的本地化智能语音转录工具。该工具采用双模型架构设计&#xff0c;集成了Qwen3-ASR-1.7B语音识别模型和ForcedAli…...

编程新知 2026/3/27 13:53:14

flbook电子书下载神器！用这招把网页变PDF（Python+JS双解法）

从网页到PDF&#xff1a;PythonJS双引擎实现FlBook电子书高效归档方案 在数字阅读时代&#xff0c;电子书平台已成为获取知识的重要渠道&#xff0c;但许多优质内容往往缺乏便捷的下载选项。对于技术从业者和数字内容管理者而言&#xff0c;掌握将在线电子书转化为可离线保存的…...

编程新知 2026/3/27 13:17:05

ChatGPT官网镜像实战：生产环境内存泄漏排查与修复全记录

国内开发者如果想借助ChatGPT进行生产环境故障排查和性能分析&#xff0c;最便捷的方案是通过聚合镜像平台RskAi&#xff08;www.rsk.cn&#xff09;。该平台支持ChatGPT&#xff08;GPT-4o&#xff09;国内直接访问&#xff0c;无需任何特殊网络环境&#xff0c;且提供每日免费…...

编程新知 2026/3/27 13:04:54