與「預」相關的link rel屬性值簡單介紹

preload

link標籤rel的屬性值，做用：用於聲明哪些資源須要在瀏覽器主渲染機制介入前進行預加載

用法

<link rel="preload" href="styles/main.css" as="style">
複製代碼

注：as表明資源類型，指定類型有利於瀏覽器優化加載策略

prefetch

link標籤rel的屬性值，做用：用於聲明哪些文檔和資源在未來有可能被訪問，瀏覽器在空閒時會預先下載它們，當用戶訪問這些資源時，瀏覽器直接從緩存返回，須要注意的是：這些資源通常在當前頁面不須要（或許至少在頁面的初始狀態不須要，用戶的後續操做纔會觸發這些資源的加載）

用法

<link rel="prefetch" href="/images/big.jpeg">
<link rel="next" href="2.html">
複製代碼

注：next表示可能會跳轉的下一個頁面

dns-prefetch

link標籤rel的屬性值，做用：用於聲明哪些域名須要預先進行DNS解析，目的是提早進行DNS解析，當請求這個域名的資源時，省去DNS解析這一步，減小整個請求過程的耗時

用法

<link rel="dns-prefetch" href="https://fonts.googleapis.com/">
複製代碼

preconnect

link標籤rel的屬性值，做用：用於聲明哪些資源須要預先進行Http連接，目的是減小創建Http連接時所帶來的耗時

prerender

link標籤rel的屬性值，做用：用於聲明哪些文檔須要被預先下載並在後臺進行渲染，目前是當打開這個頁面時能夠更快的展示

總結

以上是對與「預」相關的link rel屬性值的簡單介紹，若有錯誤，歡迎指正，詳細內容還請以MDN爲準