【性能优化】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…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1
每日一言 生活的美好，总是藏在那些你咬牙坚持的日子里。 硬件：OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写，"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...
数据链路层的主要功能是什么
数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装 封装： 将网络层下发…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本： 3.8.1 语言： JavaScript/TypeScript、C、Java 环境：Window 参考：Java原生反射机制 您好，我是鹤九日！ 回顾 在上篇文章中：CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
Java入门学习详细版（一）
大家好，Java 学习是一个系统学习的过程，核心原则就是“理论 实践 坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码，实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...