link rel =「preload」究竟如何工作？

Question

Chrome的新版本增加了對<link rel="preload">的支持。他們已經發布了大量的信息，並引用了原始文檔。有人可以提供簡單的解釋，說明它是如何工作的，與沒有rel="preload"的情況相比有什麼不同。

Answer 1

在它最基本的形式中，它將link的rel="preload"設置爲高優先級。與prefetching不同，瀏覽器可以決定它是否是個好主意，預加載會強制瀏覽器執行此操作。

=== 更深入瞭解： ===

下面是W3C

片段

許多應用需要在資源 獲取，處理了細粒度的控制，並應用於文檔。例如，某些資源的加載和處理可能會被 應用推遲，以減少資源爭用並提高初始負載的性能。通常通過將 資源移入由 應用程序定義的定製資源加載邏輯 - 即通過注入 元素或通過XMLHttpRequest啓動資源提取，當滿足特定應用程序 條件時實現此行爲。然而，也有一些情況需要儘早提取一些資源 ，但是它們的處理和執行邏輯是 ，受到特定於應用的需求的影響 - 例如，依賴關係 管理，有條件加載，排序保證等等。 目前，無法在沒有 性能損失的情況下提供此行爲。

聲明通過現有的元件中的一個（例如IMG， 腳本，鏈接）耦合資源的讀取和執行的資源。然而， 應用可能想要獲取，但是延遲執行資源 ，直到滿足某些條件。使用XMLHttpRequest獲取資源，以避免 上述行爲招致來自用戶代理的DOM和預緊解析器隱藏 資源聲明嚴重的性能損失。當相關的JavaScript 被執行，這是由於大量在大多數頁面上阻止腳本的 介紹顯著的延遲，並影響應用程序的性能 資源取，僅調度。上連桿元件 預載荷關鍵字提供聲明性取 原始其解決發起 早期提取和分離從資源執行讀取的上述使用情況。因此， preload關鍵字充當低級原語，它使 應用程序能夠構建自定義資源加載和執行行爲 而不會隱藏用戶代理中的資源並導致延遲的資源獲取懲罰。

例如，應用程序可以使用的預載荷關鍵字來發起 早，高優先級和非阻止呈現的抓取，然後可以由應用程序在適當的時間施加的CSS資源 的：

<!-- preload stylesheet resource via declarative markup --> 
<link rel="preload" href="/styles/other.css" as="style"> 
<!-- or, preload stylesheet resource via JavaScript --> 
<script> 
var res = document.createElement("link"); 
res.rel = "preload"; 
res.as = "style"; 
res.href = "styles/other.css"; 
document.head.appendChild(res); 
</script> 

這裏是一個非常深入地瞭解有關W3C：https://w3c.github.io/preload/

但是，如果你打算使用它作爲瀏覽器的支持是不是很大，全球broswer只支持在0.18％是我會小心。

以下是完整名單：http://caniuse.com/#search=preload