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

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

nanshan 2025-05-27 16:29 28 浏览 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

相关推荐

0722-6.2.0-如何在RedHat7.2使用rpm安装CDH(无CM)

文档编写目的在前面的文档中，介绍了在有CM和无CM两种情况下使用rpm方式安装CDH5.10.0，本文档将介绍如何在无CM的情况下使用rpm方式安装CDH6.2.0，与之前安装C5进行对比。环境介绍：...

ARM64 平台基于 openEuler + iSula 环境部署 Kubernetes

为什么要在arm64平台上部署Kubernetes，而且还是鲲鹏920的架构。说来话长。。。此处省略5000字。介绍下系统信息；o架构：鲲鹏920(Kunpeng920)oOS：ope...

生产环境starrocks 3.1存算一体集群部署

集群规划FE：节点主要负责元数据管理、客户端连接管理、查询计划和查询调度。>3节点。BE:节点负责数据存储和SQL执行。>3节点。CN:无存储功能能的BE。环境准备CPU检查JDK...

在CentOS上添加swap虚拟内存并设置优先级

现如今很多云服务器都会自己配置好虚拟内存，当然也有很多没有配置虚拟内存的，虚拟内存可以让我们的低配服务器使用更多的内存，可以减少很多硬件成本，比如我们运行很多服务的时候，内存常常会满，当配置了虚拟内存...

国产深度(deepin)操作系统优化指南

1.升级内核随着deepin版本的更新，会自动升级系统内核，但是我们依旧可以通过命令行手动升级内核，以获取更好的性能和更多的硬件支持。具体操作：-添加PPAs使用以下命令添加PPAs：```...

postgresql-15.4 多节点主从(读写分离)

1、下载软件[root@TX-CN-PostgreSQL01-252software]#wgethttps://ftp.postgresql.org/pub/source/v15.4/postg...

Docker 容器 Java 服务内存与 GC 优化实施方案

一、设置Docker容器内存限制（生产环境建议）1.查看宿主机可用内存bashfree-h#示例输出（假设宿主机剩余16GB可用内存）#Mem:64G...

虚拟内存设置、解决linux内存不够问题

虚拟内存设置（解决linux内存不够情况）背景介绍　　Memory指机器物理内存，读写速度低于CPU一个量级，但是高于磁盘不止一个量级。所以，程序和数据如果在内存的话，会有非常快的读写速度。但是，内存...

Elasticsearch性能调优(5):服务器配置选择

在选择elasticsearch服务器时，要尽可能地选择与当前业务量相匹配的服务器。如果服务器配置太低，则意味着需要更多的节点来满足需求，一个集群的节点太多时会增加集群管理的成本。如果服务器配置太高，...

Es如何落地

一、配置准备节点类型CPU内存硬盘网络机器数操作系统data节点16C64G2000G本地SSD所有es同一可用区3(ecs)Centos7master节点2C8G200G云SSD所有es同一可用区...

针对Linux内存管理知识学习总结

现在的服务器大部分都是运行在Linux上面的，所以，作为一个程序员有必要简单地了解一下系统是如何运行的。对于内存部分需要知道：地址映射内存管理的方式缺页异常先来看一些基本的知识，在进程看来，内存分为内...

MySQL进阶之性能优化

概述MySQL的性能优化，包括了服务器硬件优化、操作系统的优化、MySQL数据库配置优化、数据库表设计的优化、SQL语句优化等5个方面的优化。在进行优化之前，需要先掌握性能分析的思路和方法，找出问题，...

Linux Cgroups(Control Groups)原理

LinuxCgroups（ControlGroups）是内核提供的资源分配、限制和监控机制，通过层级化进程分组实现资源的精细化控制。以下从核心原理、操作示例和版本演进三方面详细分析：一、核心原理与...

linux 常用性能优化参数及理解

1.优化内核相关参数配置文件/etc/sysctl.conf配置方法直接将参数添加进文件每条一行.sysctl-a可以查看默认配置sysctl-p执行并检测是否有错误例如设置错了参数:[roo...

如何在 Linux 中使用 Sysctl 命令?

sysctl是一个用于配置和查询Linux内核参数的命令行工具。它通过与/proc/sys虚拟文件系统交互，允许用户在运行时动态修改内核参数。这些参数控制着系统的各种行为，包括网络设置、文件...

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

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