【性能优化】DNS解析优化
前言
- 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
确保项目中有如下插件
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有本地缓存 比如首次访问某站点，会耗费很多时间进行DNS解析，但解析结束后会将ip地址存入本地设备，后续再访问此域名时就会直接从缓存中取。 首次访问页面时，本页面的DNS解析是无法优化的࿰…...
【剑指 offer】合并链表
目 录 描述： 输入两个递增的链表，单个链表的长度为 n，合并这两个链表并使新链表中的节点仍然是递增排序的。 思路： 定义一个新链表，先进行我们的原俩链表判断，然后比较俩链表的每个节点大小，然…...
红酒与节日装饰：打造节日氛围的需备品
随着节日的脚步渐渐临近，节日的氛围也愈发浓厚。在这个特殊的时刻，红酒与节日装饰无疑成为了营造节日氛围的需备品。洒派红酒（Bold & Generous）作为定制红酒的品牌，其不同的韵味与节日装饰的精致整合，共…...
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"…...
【promise】Promise的几个关键问题 （三）
Ⅰ-如何改变 promise 的状态? (1) resolve(value): 如果当前是 pending 就会变为 resolved (2) reject(reason): 如果当前是 pending 就会变为 rejected (3) 抛出异常: 如果当前是 pending 就会变为 rejected Ⅱ-一个 promise 指定多个成功/失败回调函数, 都会调用吗? 当 pro…...
利用ZXing.Net Bindings for EmguCV识别条形码及绘制条形码边框17(C#)
上一篇博文：绘制条形码的效果不是很好：利用Emgucv绘制条形码边框16(C#)-CSDN博客 测试环境： win11 64位操作系统 visual studio 2022 ZXing.Net.Bindings.EmguCV 0.16.4 测试步骤如下： 1 新建.net framework 4.8的控制台项目…...
IP代理如何增强网络安全性？
在当今的数字时代，网络安全已成为一个关键问题，而使用 IP 代理可以成为增强网络安全的有效方法。根据请求信息的安全性，IP 代理服务器可分为三类：高级匿名代理、普通匿名代理和透明代理。此外，根据使用的用途ÿ…...
NDP（Neighbor Discovery Protocol）简介
定义 邻居发现协议NDP（Neighbor Discovery Protocol）是IPv6协议体系中一个重要的基础协议。邻居发现协议替代了IPv4的ARP（Address Resolution Protocol）和ICMP路由设备发现（Router Discovery），…...
为何要隐藏源 IP 地址？
概述 在网络世界中，服务器的安全至关重要。一旦服务器遭受黑客攻击，采取正确的防御措施是防止进一步损害的关键。其中一项重要的策略就是隐藏服务器的真实 IP 地址。本文将探讨隐藏源 IP 地址的重要性，并提供一些实用的方法来实现这一目标。…...
目前最流行的前端构建工具，你知道几个？
现在的市面上有很多不同的前端构建工具，我们很难对它们一一进行关注。在本文中，我们将重点介绍最受欢迎的几种，并探讨开发人员喜欢或不喜欢它们的原因。 Webpack Webpack 是一个模块打包器，主要用于处理 Web 应用程序的资源的优化…...
C++函数模板温习总结
函数模板 // 1、typename 在这里是类型重定义(typedef)，而不是宏替换(#define) //2、模板的非类型参数，属性为const ， 不允许修改 //3、函数模板不允许部分特例化，类模板可以 //4、模板函数和非模板函数重载，优先调用…...
【网络】套接字(socket)编程——TCP版
接着上一篇文章：http://t.csdnimg.cn/GZDlI 在上一篇文章中，我们实现的是UDP协议的，今天我们就要来实现一下TCP版本的 接下来接下来实现一批基于 TCP 协议的网络程序，本节只介绍基于IPv4的socket网络编程 基于 TCP 的网络编程开…...
水凝胶生物打印是什么？如何指导Organoids培养？有啥好处？
大家好，我们来了解这篇《Hydrogel-in-hydrogel live bioprinting for guidance and control of organoids and organotypic cultures》发表在《Nature Communications》的一篇文章。三维水凝胶基器官样培养，如类器官和体外器官型培养，能够自我…...
从springBoot框架服务器上下载文件 自定义一个启动器
在springboot框架中下载服务器存储的图片： 1）springboot默认访问放行的目录只有static，在static目录下存放图片资源 2）编译后的static目录中有一个1.png 2.5)编写控制器： Controller //RequestMapping("/upload&q…...
某通电子文档安全管理系统 CDGAuthoriseTempletService1接口SQL注入漏洞复现 [附POC]
文章目录 某通电子文档安全管理系统 CDGAuthoriseTempletService1接口SQL注入漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现0x06 修复建议某通电子文档安全管理系统 CDGAuthoriseTempletService1接口SQL注入漏…...
pythonselenium自动化测试实战项目（完整、全面）
前言 之前的文章说过， 要写一篇自动化实战的文章， 这段时间比较忙再加回家过11一直没有更新博客，今天整理一下实战项目的代码共大家学习。（注:项目是针对我们公司内部系统的测试，只能内部网络访问，外部网络…...
如何选择合适的虚拟机软件？对比Parallels Desktop 和VMware Fusion 使用虚拟机畅玩黑神话悟空
随着技术的发展，虚拟机软件将更加高效地管理和分配系统资源。虚拟机软件扮演着越来越重要的角色。无论是软件开发者需要测试不同操作系统环境下的应用，还是普通用户希望在一台机器上同时运行多个操作系统，虚拟机软件都是不可或缺的工具。那么…...
ESP32FreeRTOS开发笔记：2.定义、多任务与优先级调度
FreeRTOS 是一种实时操作系统（RTOS），专门用于嵌入式系统。它之所以被称为 "FreeRTOS"，是因为它是一个免费和开源的 RTOS。下面我们具体讨论一下 FreeRTOS 与 RTOS 的区别，以及 "free" 的含义。 一、什么是 RTOS？ RTOS，全称 Real-Time Operating Sy…...
【Python-办公自动化】1秒比较出2张表格之间的不同并标黄加粗
欢迎来到"花花 Show Python"，一名热爱编程和分享知识的技术博主。在这里，我将与您一同探索Python的奥秘，分享编程技巧、项目实践和学习心得。无论您是编程新手还是资深开发者，都能在这里找到有价值的信息和灵感。 自我介…...
Linux下查看各进程的swap
cat /etc/re*se Red Hat Enterprise Linux Server release 6.8 (Santiago) 简单的可以通过top命令查看 top 后 按 f 进入选择列界面 按 p 就会输出swap信息（变为P） 回车返回看到SWAP信息了 再按 F 再按p 按swap排序 再回车后就是各进程按swap排序…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
重启Eureka集群中的节点，对已经注册的服务有什么影响
先看答案，如果正确地操作，重启Eureka集群中的节点，对已经注册的服务影响非常小，甚至可以做到无感知。 但如果操作不当，可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中，损失函数的选择对模型性能具有决定性影响。均方误差（MSE）作为经典的损失函数，在处理干净数据时表现优异，但在面对包含异常值的噪声数据时，其对大误差的二次惩罚机制往往导致模型参数…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1： 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置： // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
云原生周刊：k0s 成为 CNCF 沙箱项目
开源项目推荐 HAMi HAMi（原名 k8s‑vGPU‑scheduler）是一款 CNCF Sandbox 级别的开源 K8s 中间件，通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度，为容器提供统一接口，实现细粒度资源配额…...
【FTP】ftp文件传输会丢包吗？批量几百个文件传输，有一些文件没有传输完整，如何解决？
FTP（File Transfer Protocol）本身是一个基于 TCP 的协议，理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况，主要原因包括： ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...