统一处理域名解析

我都知道在浏览器中输入URL需要经过DNS服务器解析，这里需要耗费时间，但我们无法去改变这里的效率。我们是不是经常在自己写的页面里引用很多站外的资源，比如：

<link rel="stylesheet" href="https:www.baidu.com">
<link rel="stylesheet" href="https:www.autoimg.com">
<link rel="stylesheet" href="https:www.abcccc.com">

如果在多个页面都引入了站外资源，那么在解析html的时候就会消耗效率

那么我们能不能把这些解析过程提前到一起呢？

像这样让浏览器提前异步解析dns：

在head标签里的link里面改ref为‘dns-prefetch’并把域名全部写上

    <link rel="dns-prefetch" href="https:www.baidu.com">
    <link rel="dns-prefetch" href="https:www.autoimg.com">
    <link rel="dns-prefetch" href="https:www.abcccc.com">

在vue中

const fs=require('fs')
const path=require('path')
const {parse}=require('node-html-parser')
const {glob}=require('glob')
const urlRegex=require('url-regex')
const { url } = require('inspector')



//获取外部链接的正则表达式
const urlPattern=/(http?:\/\/[^/]*)/i;
const urls=new Set();


//遍历dist目录中的所有HTML、js、css文件
async function searchDomain(){
    const files=await glob('dist/**/*.{tml.css,js}');
    for(const file of files){
        const source=fs.readFileSync(file,'utf-8');
        const mapches=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()

前端优化篇—项目DNS解析优化

统一处理域名解析

那么我们能不能把这些解析过程提前到一起呢？