【性能优化】DNS解析优化

前言

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

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

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

实现

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

html 复制代码
<link rel="dns-prefetch" href="https://www.xxx.com">
html 复制代码
<!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

确保项目中有如下插件

html 复制代码
npm install node-html-parser
npm install glob
npm install url-regex

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

javascript 复制代码
// 该node文件:识别打包结果中的站外资源地址并动态插入index.html中link实现dns-prefetch,提高渲染速度
// 调用方式:node ./scripts/dns-prefetch.js

const 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

javascript 复制代码
"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
javascript 复制代码
import { defineConfig } from 'vite';
import prefetchDns from 'vite-plugin-prefetch-dns';

export default defineConfig({
  plugins: [
    ...其他插件
    prefetchDns()
  ]
});

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

相关推荐
前端拾光者36 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome