关于 rel 属性我们经常使用的莫过于 icon 以及 stylesheet 属性了, 工作中也遇到过 prefetch, preload, preconnect等字眼，虽然看到关键字也知道大概是做什么用的，但是一直缺乏总结，今天就安排一下
icon
网站图标，浏览器 Tab 页面左侧小 icon
<link rel="icon" href="favicon.ico">
stylesheet
样式表
<link href="xxx.css" rel="stylesheet">
dns-prefetch
DNS 预解析，在请求静态资源之前浏览器尝试解析域名
<link rel="dns-prefetch" href="https://www.google.com/" >
preload
资源预加载
<link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
哪些资源可以被预加载？
- audio: 音频文件
- document: html文档
- embed: 使用在
<embed>标签上的资源 - fetch: 可以通过 ajax 请求访问的资源，常见的有 JSON 文件
- font: 字体文件
- image: 图片
- script: JavaScript 文件
- style: CSS 样式表
- track: WebVTT file.
- worker: WebWorker 文件
- video: 视屏文件
preconnect
预连接，获取所需资源的来源，启动 DNS 查找，TCP 握手和 TLS 协商
<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>
prefetch
用于标识下一个页面需要的资源, 当前页面不会生效，加载优先级比 preload 低
<link rel="prefetch" href="//www.google.com/next-page.html" as="document" crossorigin="use-credentials">
<link rel="prefetch" href="/main.js" as="script">
prerender
在后台呈现指定的网页，并将内容呈现在屏幕外
<link rel="prerender" href="//www.google.com/next-page.html">
noopener
确保打开不受信任的链接时，他们无法通过 window.opener 属性篡改原始文档
<a href=help.html target=example rel="noopener noreferrer">Help!</a>
可能最后一个 noopener 跟性能没啥关系，但是我觉定还是把它列出来了，在你的网页中有跳转友情链接等无需双方通信的页面时，把这个属性加上。如果你不想让别人知道来源的话， 还可以加上 noreferrer。
