link的rel属性的属性值小结

该文章本来是想总结写一些可以提升浏览器优化的rel属性标签，后来发现总结全部rel属性基本在一些主流浏览器没有找到，但是在总结整理资料的过程中发现张鑫旭大大已经总结过了，接下来我就挑了几个我认为面试中可能会提及用来优化浏览器性能的几个标签和一些unbelievable标签，我觉得大家可能也找不到张鑫旭大大的那篇文章，这里我贴一个链接HTML rel属性值释义大全
（后来我试了谷歌，发现就在排名在第五！！！浏览器爸爸们为这写个人门户网站提高下排名吧）

文章只是小结一下，详细可以查看MDN文档

文章目录
Alternative stylesheets
dns-prefetch
manifest
modulepreload
preconnect
prefetch
preload
prerender
Alternative stylesheets
即：可替换的样式，一般可以结合title达到样式更换的效果，具体的操作可以查看之前写的博客

dns-prefetch
一个经典的面试题就是：从输入url到页面加载发生了什么中，第一步就是DNS解析，而这个属性DNS Prefetching 是让具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能 减少用户的等待时间，提升用户体验

<link rel="dns-prefetch" href="https://www.bilibili.com/" />
1
manifest
manifest是HTML5引入的应用程序缓存，即在没有网络的情况下可以进行访问，.webmanifest是约定俗成扩展名，返回文件内容类型需要是：Content-Type: application/manifest+json，也支持.json扩展名的清单文件可以接收一个json文件，文件中包含需要离线展示的一些配置项，这些配置项有关的内容，例如：图片、基本配置内容会保存到本地

当然manifest还可以直接创建一个.manifest文件

<link rel="manifest" href="/manifest.webmanifest`">
1
// 如果是json文件，可以如下配置
{
"name":"mzy",
"background-color":"red",
"icons":[{
"src":"images/icon1.png",
"type":"png",
"size":"48×48"
}]
}
1
2
3
4
5
6
7
8
9
10
modulepreload
可以预加载原生模块，保证某些文件可以不必等到执行时才加载

<link rel="modulepreload" href="./index.js">
// 等价于
<script type="module" src="./index.js"></script>
1
2
3
preconnect
提前对服务器建立TCP链接，虽然可以优化性能，但是如果滥用会占用CPU的时间

<link rel="preconnect" href="https://www.bilibili.com/" />
1
prefetch
预获取链接的内容，通常是一些静态资源

prefetch适合在用户浏览某一页的时候去预先加载下一页的内容

<link rel="prefetch" href="./index-2.html">
1
preload
预加载，告诉浏览器需要预加载那些资源，通常需要用as告诉浏览器的预加载内容的属性

<link rel="preload" as="script" href="index.js">
<link rel="preload" as="style" href="style.css">
1
2
prerender
预渲染，告诉浏览器在背后先默默渲染页面

<link rel="prerender" href="index.html">
————————————————
版权声明：本文为CSDN博主「张小益达」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41033913/article/details/104073353