在前端性能優(yōu)化方面，有一些小細節(jié)，做好了雖然不會大幅提升性能，但是能說明你細心周到，是個暖男，肯定能找到女朋友。
通過link的rel屬性，我們能夠給瀏覽器提供一些resource hint, 來幫助瀏覽器做出一些預測，進而實現(xiàn)體驗上的優(yōu)化。
dns-prefetch
<link rel="dns-prefetch" >
提前解析域名。只解析域名，不會下載任何資源，因此 href 通常寫入第三方域名。寫入具體的圖片或js資源是沒有意義的。
寫入本站域名沒有任何效果，因為當瀏覽器解析到這一行代碼的時候，本站域名早已經(jīng)解析完成。
使用場景舉例
用戶很可能點擊某個鏈接，下載跨域圖片。如果當前頁面引入了dns-prefetch，當用戶真正點鏈接時，dns的解析早已完成，省去了一些時間。在復雜網(wǎng)絡場景下，會有較好的效果。
preconnect
<link rel="preconnect" >
提前建立連接。比dns-prefetch多走了兩步，除了完成dns解析之外，還完成了TCP握手，TLS握手（https情況下）。
使用場景舉例
同dns-prefetch
prefetch
<link rel="prefetch" >
預加載。在瀏覽器空閑時下載資源。這就是真正的資源下載了，比dns-prefetch多走了好幾步。href 請寫上具體的資源名稱。
使用場景舉例
在用戶閱讀當前頁時，提前準備“下一頁”內容。
prerender
<link rel="prerender" >
提前渲染。非常“重”的一個操作，瀏覽器會提前完成所有的資源加載，執(zhí)行，渲染并保存在內存里。在需要時，立刻調出。是一個很耗資源和算力的操作，在SPA下，基本沒有應用場景。
需要注意的是，以上操作本身也是會耗費瀏覽器資源的，所以請按需使用。
preload
容易和prefetch混淆, 這里解釋一下
- prefetch 是預加載，是對用戶接下來很可能會使用到的資源的預先下載。
- preload 本質上是影響資源的加載順序，把可能后置下載的資源前置下載。
使用場景舉例
當資源沒有直接體現(xiàn)在html中，而是隱藏在css或是js里，preload可以提前告知瀏覽器隱藏資源的存在，以便瀏覽器做出最優(yōu)的安排。
存在隱藏資源的樣式 - style.css
@font-face {
font-family: myFirstFont;
src: url('https://fonts.gstatic.com/s/sofia/v8/8QIHdirahM3j_su5uI0Orbjl.woff2');
}
h1 {
font-family: myFirstFont;
}
未使用preload
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Title</h1>
</body>
</html>
加載過程
對字體的下載發(fā)生在css下載之后，因為只有當瀏覽器下載完css并完成解析之后，才能知道字體資源的存在
使用preload
<!DOCTYPE html>
<html>
<head>
<link rel="preload" as="font"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Title</h1>
</body>
</html>
加載過程
同時下載字體和css，因為瀏覽器提前知道了隱藏資源的存在，做出了最優(yōu)安排。與未使用preload相比，下載時間減少了。 preload本質上是影響資源的加載順序。
