preload和prefetch preload 资源在当前页使用，优先加载 prefetch 资源在未来页面使用，空闲时加载
都是用link标签 rel方式
preload
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
prefetch
<link rel="prefetch" href="other.js" as="script">
dns-prefetch
dns-prefetch 即 DNS预查询
preconnect
preconnect 即 DNS预连接
域名需要dns预解析才能拿到ip地址，ip地址就是具体的服务器 然后就可以tcp连接三次握手
为什么要访问域名？
ip地址很难记 XXX.XXX.XXX。
一个在北京一个在深圳，访问baidu.com的ip地址不一样，有很多个并且可能还会变。我们就访问一个域名，域名背后的事情交给计算机解决。
百度是一个全世界的网站，在什么地方访问的都不一样，这个网站做了大量的集群和部署，一般访问就近的集群。
第一步就是dns解析，dns解析要花费时间的，为了节约时间，我们可以预查询预连接。
对于未来页面 提前解析提前连接
<link rel="dns-prefetch" href="https://fonts.gstatic.com/" >
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin >
prefetch是资源预获取（和preload相关） dns-prefetch 是DNS预查询（和preconnect相关）
