使用 Intersection Observer 提高網站效能

介紹

為了尋求更快、更有效率的網路體驗，開發人員不斷尋求新的方法來優化效能。 Intersection Observer API 是 Web 開發人員武器庫中的強大工具。此 API 可讓您觀察目標元素可見性的變化，從而啟用延遲載入和延遲內容載入等進階策略。在本部落格中，我們將探討如何使用 Intersection Observer API 來提升網站的效能。

什麼是交叉口觀察者？

Intersection Observer API 提供了一種非同步觀察目標元素與祖先元素或頂級文件視窗相交變化的方法。這對於用戶向下捲動頁面時延遲載入圖像或其他內容特別有用。

效能改進的關鍵用例

1. 延遲載入映像和 iframe：僅在映像和 iframe 即將進入視窗時載入映像和 iframe，減少初始載入時間。
2. 螢幕外內容的延遲載入：延遲載入廣告、影片或繁重腳本等內容，直到它們出現在視圖中。
3. 無限滾動：當使用者向下捲動頁面時載入更多內容。
4. 分析追蹤：追蹤元素何時進入視圖以進行使用者參與度分析。

基本用法

讓我們深入了解 Intersection Observer API 的基本實作。

1. 建立交叉口觀察者

首先，建立 IntersectionObserver 的實例：

let observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Perform actions when the element is visible
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target); // Stop observing after loading
    }
  });
}, {
  root: null, // relative to document viewport
  rootMargin: '0px', // margin around root
  threshold: 0.1 // visible amount of item shown in relation to root
});

1. 觀察目標元素

選擇您想要觀察的元素並開始觀察它們：

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

1. 延遲載入的 HTML 結構

使用資料屬性確保您的 HTML 結構支援延遲載入：

<img data-src="path/to/image.jpg" alt="Lazy Loaded Image">

進階配置

為了獲得更多控制，您可以調整根邊距和閾值選項：

1. 根邊距：在內容進入視口前稍微預先載入內容。

rootMargin: '100px' // preload 100px before entering viewport

1. 閾值：確定在觸發回調之前應該有多少元素可見。

threshold: [0.25, 0.5, 0.75, 1] // trigger at 25%, 50%, 75%, and 100% visibility

實際範例：延遲載入圖片

這是延遲載入影像的完整範例：

1. JavaScript 程式碼

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = document.querySelectorAll("img.lazy");

  let imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        let img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove("lazy");
        observer.unobserve(img);
      }
    });
  });

  lazyImages.forEach(image => {
    imageObserver.observe(image);
  });
});

1. HTML 結構

<img class="lazy" data-src="image.jpg" alt="Lazy Loaded Image">

好處

1. 縮短初始載入時間：透過僅載入視口中或附近的影像和內容，可以縮短初始載入時間。
2. 改進的滾動效能：延遲載入離螢幕內容可以讓捲動更流暢。
3. 更好的使用者體驗：使用者只下載他們即將查看的內容，從而獲得更靈敏的體驗。

結論

透過實作 Intersection Observer API，您可以顯著增強網站的效能和使用者體驗。無論您是延遲載入映像、延遲載入繁重的腳本還是實作無限捲動，此 API 都提供了一種強大而有效的方法來管理內容可見性。立即開始使用 Intersection Observer，看看您網站的效能有何不同！

以上是使用 Intersection Observer 提高網站效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！