## 一、DNS prefetch DNS prefetching通过指定具体的URL来告知客户端未来会用到相关的资源，这样浏览器可以尽早的解析DNS。 ~~~ <link rel="dns-prefetch"href="//example.com"> ~~~ ## 二、Preconnect 和DNS prefetch类似，preconnect不光会解析DNS，还会建立TCP握手连接和TLS协议 ~~~ <link rel="preconnect"href="http://css-tricks.com"> ~~~ ## 三、Prefetch 当能确定网页在未来一定会使用到某个资源时，开发者可以让浏览器提前请求并且缓存好以供后续使用。prefetch支持预拉取图片、脚本或者任何可以被浏览器缓存的资源。 ~~~ <link rel="prefetch"href="image.png"> ~~~ ## 四、Subresource subresource可以用来指定资源是最高优先级的。 ~~~ <link rel="subresource"href="styles.css"> ~~~ ## 五、Prerender prerender是一个重量级的选项，它可以让浏览器提前加载指定页面的所有资源。 ~~~ <link rel="prerender" href="/thenextpage.html"/> ~~~ ## 六、Preload （未来） preload草案建议允许始终预加载某些资源，不像prefetch有可能被浏览器忽略，浏览器必须请求preload标记的资源。 ~~~ <link rel="preload"href="image.png"> ~~~ ## 七、图片预加载 ~~~ var preloadImgList = [ 'images/1.jpg', 'images/2.jpg', 'images/3.jpg' ]; preloadImgList.forEach(function(v) { var img = new Image(); img.src = v; }); ~~~