Preload
在浏览器的主渲染机制介入前就进行预加载，这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。
<head>
<meta charset="utf-8">
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>bouncing balls</h1>
<canvas></canvas>
<script src="main.js"></script>
</body>
许多不同类型的内容都可以被预加载，一些主要可用的as 属性值列举如下：
audio: 音频文件。document: 一个将要被嵌入到[<frame>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/frame)或[<iframe>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe)内部的HTML文档。embed: 一个将要被嵌入到[<embed>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed)元素内部的资源。fetch: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。font: 字体文件。image: 图片文件。object: 一个将会被嵌入到[<embed>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed)元素内的文件。script: JavaScript文件。style: 样式表。track: WebVTT文件。worker: 一个JavaScript的web worker或shared worker。video: 视频文件。
Prefetch
空闲时预加载未来要使用的资源，优先级较低，最常用的是dns-prefetch
HTML: <link rel="prefetch" href="/uploads/images/pic.png">
HTTP Header: Link: </uploads/images/pic.png>; rel=prefetch
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//opensource.keycdn.com">
<link rel="dns-prefetch" href="//cdn.domain.com">
Prerender
优化可能导航到的下一页上的资源的加载，prerender在后台渲染了整个页面，整个页面所有的资源
<link rel="prerender" href="https://www.keycdn.com">
Preconnect
允许浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，建立与服务器的连接，这包括 DNS 解析，TLS 协商，TCP 握手，这消除了往返延迟并为用户节省了时间
dns-prefetch 和preconnect可以配合使用
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">
如果页面需要建立与许多第三方域的连接，则将它们预先连接会适得其反。 preconnect 提示最好仅用于最关键的连接。对于其他的，只需使用 即可节省第一步的时间-DNS查找。
