Resolución y optimización de DNS (operación y práctica, la optimización de DNS se puede lograr en un minuto)
Cuando ingresamos una URL y visitamos un sitio web, ¿qué hará el navegador? (Este artículo no explica mucho sobre el conocimiento teórico de DNS, explica principalmente cómo usar el código del paquete para la optimización de DNS en el proyecto)
Respuesta: nombre de dominio–>DNS–>IP
Cuando se visita un sitio por primera vez, se dedica mucho tiempo a la resolución DNS del sitio.
Veamos una imagen:
Puntos de conocimiento que necesitamos saber:
1.DNS解析的过程费时间
2.DNS有本地缓存
¿Cuándo realizar la optimización NDS?
Respuesta: Cuando a.com abre un sitio web, pero este sitio web necesita cargar las imágenes de b.com y los archivos de c.com en el script, podemos analizar estas situaciones en el código del proyecto con anticipación, y es Análisis todavía asincrónico.
¿Cómo permitir que el navegador resuelva estos nombres de dominio por adelantado?
Cree una carpeta de scripts en nuestro proyecto, cree otro archivo, coloque el siguiente código en él y luego ejecute npm run build para empaquetarlo, de modo que todos los enlaces externos en su proyecto puedan resolverse previamente mediante DNS.
Agregue automáticamente bloques de código previamente analizados a su archivo html empaquetado después de que se complete el análisis
Código empaquetado adjunto:
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 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]);
}
});
}
}
}
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 searchDomain();
// 在<head>标签中添加预取链接
await insertLinks();
}
main();
{
await searchDomain();
// 在<head>标签中添加预取链接
await insertLinks();
}
main();