HTML <link rel="preload" href="" as="" type=""> 標籤 (tag) - 對資源或內容進行預加載

你可以用 <link> preload 指定哪些資源 (resource) 在頁面載入後自動非同步地 (asynchronously) 預加載，利用這方式可以使資源在隨後需要的時候，可以直接使用不用再等網路下載傳輸的時間，進而提升頁面的渲染速度和使用者體驗。

rel="preload" 基本使用是搭配 href 和 as 屬性 (attribute) 來指定要被預加載資源的位址和類型。

哪些類型的資源可以被 preload？以下的資源類型可以被使用在 as：

audio: 音頻
document: 將被嵌入 frame 或 iframe 的 HTML 文件
embed: 要被嵌入 <embed> 中的內容
fetch: 那些將會透過 fetch 或 XHR 請求的資源
font: 字型/字體檔
image: 圖片
object: 將被嵌入 <embed> 的文件
script: JavaScript 文件
style: CSS 樣式表
track: WebVTT 文件
worker: 一個 JavaScript 的 web worker 或 shared worker
video: 影片

一個 preload 的使用例子：

<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">

  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

  <script src="main.js"></script>
</body>

在上面例子我們預先加載了 style.css 和 main.js，在隨後需要這些檔案的地方就可以立即使用。

還有一個 type="" 屬性用來提示資源的 MIME 類型，這可以幫助瀏覽器 (browser) 判斷不去下載它不支援的資源類型。例如：

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">

此外，preload 可以是 RWD 響應式的預加載，透過 media="" Media Query 屬性指定針對特定螢幕大小時選擇性預載。例如：

<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">