當瀏覽器加載網頁時，通常會遵循一個默認的流程，先加載 HTML、CSS 和 JavaScript，然后再加載圖片、音頻、視頻等資源，這個默認的流程可能會導致網頁加載速度變慢，用戶體驗不佳，因此，可以使用一些技術來優化網頁加載的速度，其中之一就是按需加載，
按需加載是指根據用戶實際需要，動態地加載資源，而不是一次性加載所有資源，這樣可以減少頁面加載時間，提高用戶體驗，
在按需加載中，HTML 提供了一些標識，如 pre-load 和 pre-fetch，
pre-load 和 pre-fetch 是兩種 HTML 資源提示，它們用于告訴瀏覽器預先加載或獲取資源，以便在頁面上更快地顯示內容，這兩種技術的目的是優化用戶體驗，提高頁面加載速度，降低用戶感知到的延遲，下面分別介紹這兩個標識：
pre-load（預加載）
pre-load 是一種資源提示，用于指示瀏覽器盡早請求并加載關鍵資源，以便在頁面渲染程序中減少延遲，pre-load 用于那些頁面需要立即使用的資源，如關鍵的 CSS、JavaScript 檔案或者影像，在 HTML 中，可以使用 <link> 標簽的 rel 屬性設為 preload，來實作預加載，
示例：
<link rel="preload" href="styles.css" as="style"> <link rel="preload" href="script.js" as="script"> <link rel="preload" href="image.jpg" as="image">
其中，href 屬性指定要加載的資源路徑，as 屬性指定資源的型別，可以是 image、font、script、style 等，瀏覽器在加載資源時，會根據 as 屬性的值，選擇合適的加載方式，
pre-fetch（預獲取）
pre-fetch 也是一種資源提示，它告訴瀏覽器在后臺獲取資源，以便在用戶瀏覽其他頁面時快速加載，與 pre-load 不同，pre-fetch 用于加載對當前頁面不是關鍵性的資源，例如下一頁可能用到的 CSS、JavaScript 檔案或影像，這些資源在頁面渲染時不會被立即使用，但可以在稍后用到時直接從快取中獲取，
示例：
<link rel="prefetch" href="next-page.css" as="style"> <link rel="prefetch" href="next-page-script.js" as="script"> <link rel="prefetch" href="next-page-image.jpg" as="image">
其中，href 屬性指定要預先獲取的資源路徑，瀏覽器會在空閑時段，預先獲取資源，以提高頁面的訪問速度，
需要注意的是，pre-fetch 可能會消耗用戶的帶寬和電量，因此在使用時需要慎重考慮，
總之，pre-load 和 pre-fetch 都是 HTML 中用于優化頁面加載性能的資源提示技術，pre-load 主要用于加載當前頁面的關鍵資源，而 pre-fetch 用于預獲取可能在后續頁面中用到的資源，這兩種技術都可以通過 <link> 標簽的 rel 屬性來實作，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549906.html
標籤：JavaScript