## 一、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; }); ~~~