最近在了解服务端渲染和客户端渲染的时候，会打开我们熟知的某宝和某东，右键
查看源代码作对比，发现他们都有用dns-prefetch这个在头部的link的资源链接，😏还记得只要是带这种pre-（预）的似乎都是跟性能优化相关的
🧐它是什么
dns-prefetch直译就是dns预获取，是尝试在请求资源之前，解析域名；作为后面可能会访问到的资源链接。
这里放一下dns解析的过程图
dns解析过程.png
🔍为什么用它
当浏览器从第三方服务器拿资源时，必须将域名解析为IP地址（也就是DNS解析寻址的过程）。当一个网站，打开了许多第三方链接，dns解析可能会造成一定程度的延迟，dns-prefetch 可以掩盖dns解析的延迟
📝使用
1.dns-prefetch html入口处添加
//入口html手动添加相关代码
<link rel="dns-prefetch" href="https://fonts.googleapis.com/">
每次引用跨域站点的资源时，都应该在head头部放置dns-prefetch提示需要预解析
-
prefetch、preload结合webpack配置
当结合框架使用的时候，一般是在webpack打包配置项里，结合插件preload-webpack-plugin，做对应的配置，vue项目可参考这里
// pre
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
as(entry) {
if (/\.css$/.test(entry)) return 'style';
if (/\.woff$/.test(entry)) return 'font';
if (/\.png$/.test(entry)) return 'image';
return 'script';
}
})
]
🧮兼容性
dns-prefetch兼容性
📮rel属性
rel属性命名链接文档与当前文档的关系，常见的是，
- 链接一个外部的样式表
- 或者用于表示，不同移动平台上特殊的图标类型
// 某宝网站图标
<link
href="[//img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png]
(https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png)"
rel="apple-touch-icon-precomposed"
/>
-
pre-*等关于性能和安全特性的属性
➰拓展：preload & prefetch
- 除了介绍的这里介绍的dns-prefetch，还有两种：将
rel设定为preload，表示浏览器应该预加载该资源 (用rel="preload"预加载内容) 。以及prefetch
他俩其实都是表示一种预加载的行为，两者大致的区别是：
- preload是对应一定会加载的资源，并强制将它的请求优先级提到前面，可用于网页字体文件的加载（避免font文件在其他文件后加载完，可能会影响用户体验）；
也就是大部分场景下无需特意使用preload，而是类似字体文件这种隐藏在脚本、样式中的首屏关键资源 - prefetch是对应后面可能会加载的资源，比如在首页加载的时候，会把首页的某个弹窗里的图片资源请求到，然后打开弹窗的时候，会直接从prefetch缓存里面去拿；
异步加载的模块（典型的如单页系统中的非首页），或者，大概率即将被访问到的资源可以使用prefetch
网友评论