1、dns-prefetch#
域名轉化為 ip 是一個比較耗時的過程，dns-prefetch 能讓瀏覽器空閒的時候幫你做這件事。尤其大型網站會使用多域名，這時候更加需要 dns 預取。
<link rel="dns-prefetch" href="//baidu.com" />
2、prefetch#
prefetch 一般用來預加載可能使用的資源，一般是對使用者行為的一種判斷，瀏覽器會在空閒的時候加載 prefetch 的資源。
<link rel="prefetch" href="http://www.baidu.com/" />
3、preload#
和 prefetch 不同，prefecth 通常是加載接下來可能用到的頁面資源，而 preload 是加載當前頁面要用的腳本、樣式、字體、圖片等資源。所以 preload 不是空閒時加載，它的優先級更強，並且會佔用 http 請求數量。
<link rel="preload" href="style.css" as="style" />
as 值包括#
scriptstyleimagemediadocumentonload方法是資源加載完成的回調函數
4、preconnect#
當瀏覽器向伺服器請求一個資源的時候，需要建立連接，而建立一個安全的連接需要經歷以下 3 個步驟：
- 查詢域名並將其解析成 IP 地址（DNS Lookup）；
- 建立和伺服器的連接（Initial connection）；
- 加密連接以確保安全（SSL）；
以上 3 個步驟瀏覽器都需要和伺服器進行通訊，而這一來一往的請求和響應勢必會耗費不少時間。
當我們的站點需要對別的域下的資源進行請求的時候，就需要和那個域建立連接，然後才能開始下載資源，如果我都已經知道了是和哪個域進行通訊，那不就可以先建立連接，然後等需要進行資源請求的時候就可以直接進行下載了。對比正常請求和配置了 preconnect 時候的請求，它們在請求時間軸上看到的表現是不一樣的。
通過如下配置可以提前建立和 https://example.com 這個域的連接：
<link rel="preconnect" href="https://example.com">
通過 preconnect 提早建立和第三方源的連接，可以將資源的加載時間縮短 100ms ~ 500ms，這個時間雖然看起來微不足道，但是它是實實在在的優化了頁面的性能，提升了使用者的體驗。
通過 preconnect 和別的域建立連接後，應該儘快的使用它，因為瀏覽器會關閉所有在 10 秒內未使用的連接。不必要的預連接會延遲其他重要資源，因此要限制 preconnect 連接域的數量。
5、defer 和 async#
//defer
<script defer src="script.js"></script>
//async
<script async src="script.js"></script>
defer 和 async 都是異步 (並行) 加載資源，不同點是 async 是加載完立即執行，而 defer 是加載完不執行，等到所有元素解析完再執行，也就是 DOMContentLoaded 事件觸發之前。 因為 async 加載的資源是加載完執行，所以它比不能保證順序，而 defer 會按順序執行腳本。
