preload & prefetch

時間 2019-12-05

標籤 preload prefetch 简体版

原文原文鏈接

原文地址在個人筆記裏，以爲還行就給個 star 吧：）

關於 preload 和 prefetch 早有耳聞，知道它們能夠優化頁面加載速度，然具體狀況卻瞭解很少。搜索了相關的資料後對其有了些認識，在此記錄一下。css

preload

一般在頁面中，咱們須要加載一些腳本和樣式，而使用 preload 能夠對當前頁面所需的腳本、樣式等資源進行預加載，而無需等到解析到 script 和 link 標籤時才進行加載。這一機制使得資源能夠更早的獲得加載並可用，且更不易阻塞頁面的初步渲染，進而提高性能。html

使用方式

將 link 標籤的 rel 屬性的值設爲 preload，as 屬性的值爲資源類型（如腳本爲 script，樣式表爲 style）git

<head>
  <meta charset="utf-8">
  <title>preload example</title>
  <!-- 對 style.css 和 index.js 進行預加載 -->
  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="index.js" as="script">

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

<body>
  <div id="app"></div>

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

prefetch

與 preload 同樣，都是對資源進行預加載，可是 prefetch 加載的資源通常不是用於當前頁面的，即將來極可能用到的這樣一些資源，簡單點說就是其餘頁面會用到的資源。固然，prefetch 不會像 preload 同樣，在頁面渲染的時候加載資源，而是利用瀏覽器空閒時間來下載。當進入下一頁面，就可直接從 disk cache 裏面取，既不影響當前頁面的渲染，又提升了其餘頁面加載渲染的速度。github

使用方式

同 preload 很類似，無需指定 as 屬性：瀏覽器

<head>
  <meta charset="utf-8">
  <title>preload example</title>
  <!-- 對 style.css 和 index.js 進行 preload 預加載 -->
  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="index.js" as="script">

  <!-- 對資源進行 prefetch 預加載 -->
  <link rel="prefetch" href="next.css">
  <link rel="prefetch" href="next.js">

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

<body>
  <div id="app"></div>

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

總結

對當前頁面須要的資源，使用 preload 進行預加載，對其它頁面須要的資源進行 prefetch 預加載。app

相關標籤/搜索

preload

prefetch

related&prefetch

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。