JavaScript中的延遲加載是什么

這篇文章主要介紹JavaScript中的延遲加載是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

在這篇文章中，我們將看看延遲加載在web上是如何工作的。我們將介紹本地延遲加載API——延遲加載是如何實現的，延遲加載的重要性和優點，最后是一個簡單的延遲加載web內容用例。

理解延遲加載API及其工作方式將幫助已經使用實現這些技術的庫和框架的開發人員了解底層的情況。此外，如果他們打算實現自己的延遲加載庫，他們將能夠執行更多的指導研究并應用他們學到的技術。

對于一個真實的用例，那些通過平臺上的廣告獲得收入的營銷和廣告公司可以很容易地優化和應用延遲加載，從而很容易地判斷哪些廣告被訪問他們平臺的用戶看到，從而做出更好的商業決策。

什么是延遲加載?

根據Wikipedia的介紹，延遲加載是一種設計模式，用于在需要時推遲元素或對象的初始化。這意味著僅當用戶在網頁上滾動時，相對于父DOM元素的目標DOM元素才被加載并可見（當兩個元素之間存在交集時，基于設置的閾值）。

不采用這種模式的缺點可能導致:

• 由于從一個或多個源獲取多個圖像或其他web資源的多個同步網絡請求或批處理請求，導致頁面性能嚴重滯后

• 由于要下載/獲取的包的大小而增加頁面加載時間

• 用戶保留率低，主要適用于互聯網連接較差的地區。當我們開發人員犯了不盡早實現延遲加載的錯誤時，用戶完全避免使用平臺的情況并不少見

• 由于圖像、iframe和視頻等資源或資產處理不當，對web性能和可訪問性造成巨大影響

目前，大多數現代和更新的瀏覽器在web上都支持延遲加載。但是，對于還沒有提供這種支持的瀏覽器，實現這種技術的填充或庫在它們之上提供了簡單的API層。

延遲加載解決了減少初始頁面加載時間的問題-僅顯示用戶在初始化網頁時以及隨后滾動頁面時需要查看的資源，例如圖像或其他內容。

眾所周知，Web性能和可訪問性問題是多方面的;減少頁面大小、內存占用和一般的加載時間可以為web平臺做出很大貢獻。當我們有一堆圖像和視頻，并且在瀏覽器DOM初始化時一次性加載它們時，延遲加載的優點就變得很明顯了。

當然，您現在應該已經理解了這將導致什么，正如我們前面所討論的。

從數據來看，大多數網站都嚴重依賴圖像和其他網絡內容，比如視頻或iframe，來將信息傳遞給目標受眾。雖然這可能看起來瑣碎而簡單，但是我們向用戶顯示這些內容的方式最終決定了我們的平臺的性能。

此外，有助于優化頁面加載時間的操作(比如依賴于用戶是否滾動到頁面特定部分的事件)是延遲加載的一些用例。隨著本文的繼續，我們將更多地了解現實環境中的其他用例。

本機延遲加載API

延遲加載構建在交集觀察者API的基礎上，交集觀察者API是一種瀏覽器API，它提供了一種方法來檢測或知道一個稱為目標、父元素的元素何時在瀏覽器視口內可用或可見(視情況而定)。

當這種情況發生時，將調用處理程序函數來幫助處理代碼邏輯的其他部分，稍后我們將看到這一點。

有了這個新的和改進的瀏覽器API，我們還可以知道兩個DOM元素何時相交——這里的意思是，目標DOM元素何時進入瀏覽器的視口，或者與另一個元素(很可能是它的父元素)相交。

為了更好地理解延遲加載是如何工作的，我們首先必須理解如何創建一個交集觀察者。為了創建一個交集觀察者，我們所需要做的就是偵聽交集觀察者事件的發生，并在這種事件發生時觸發一個回調函數或處理程序來運行。

交集觀察者事件是一種類似于文檔事件類別的瀏覽器事件，其中包括DOMContentLoaded事件。

注意:對于交集事件，我們需要指定要應用交集的元素。這個元素通常被稱為根元素。但是，如果沒有指定根元素，則意味著我們打算針對整個瀏覽器窗口。

此外，我們還需要為根元素指定一個空白(如果提供了)，以便在必要時可以在交集上輕松地更改其形狀或大小。讓我們看一個例子來更好地理解它:

let options = {
root: null,
rootMargin: 10px,
threshold: 1.0
}

let observer  = new IntersectionObserver (options, callback);

在上面的代碼片段中，我們看到了一個用于創建觀察者的簡單用例。options對象幫助我們定義目標的自定義屬性。

這里，options對象中的threshold屬性表示何時觸發回調。它的默認值為0，這意味著一旦用戶接近目標元素并且它變得可見，就會觸發回調。

另一方面，根元素是父元素，當目標元素在用戶滾動網頁時對用戶可見時，根元素充當目標元素的視區。注意，如果根設置為空，父元素將自動成為視區。

最后，rootMargin幫助設置根元素周圍的空白。例如，在計算目標元素和父元素/viewport之間的交集之前，可能需要調整它的大小、邊距或維數。

而且，接受兩個輸入參數的回調包括一個我們打算應用于目標元素和調用回調的觀察者的intersectionObserverEntry對象列表。

回調的簽名如下:

let callback = (entries, observer) => {
entries.forEach(entry => {
If (entry.isIntersection) {
// do some magic here
}
// and some other methods
})
}

該intersectionObserverEntry對象表示父元素和目標元素之間存在交集。它有一堆的API中的屬性，其中包括isIntersection，intersectionRatio，intersectionRect，target，time，等。

我們需要針對特定的DOM元素，并在它與父元素相交時觸發回調函數。目標DOM元素的一個例子如下面的代碼片段所示:

let target = document.querySelector("#targetElement");

在上面的代碼片段中，我們創建了一個目標元素并為它分配了一個變量。之后，我們使用intersectionObserver構造函數/函數簽名上的observe方法觀察目標元素，如下所示:

// start observing for changes on the target element
observer.observe(target);

當觀察者為目標設置的閾值達到時，將觸發回調。

最后，observe()方法告訴觀察者要觀察什么目標元素。請注意，交集觀察者在它的API中同樣有一堆方法:unObserve()、takeRecords()、observe()等是一些例子。

延遲加載技術的優點

現在，我們必須更好地理解為什么延遲加載web內容和資產是必要的。讓我們來看看使用這種技術的一些進一步的優勢:

• 構建可高度訪問的web應用程序。關于web可訪問性的討論是今天的首要任務。使用這種技術肯定有助于建立一個范圍更廣的平臺

• 高用戶保留。如果web平臺與驅動業務目標以及提供價值相關聯，那么實現這種技術將有助于使平臺變得更加用戶友好。web標準稍后會感謝您的!

• 作為開發人員，您可能需要在web平臺上實現無限滾動。理解這一概念將大有幫助，從而提供即時的業務價值

實施延遲加載

讓我們來看一個在網頁上延遲加載圖像的簡單例子。我們將開始自定義的選項對象的目標元素，我們打算觀察的交集:

let  options = {
root: document.querySelector('.root'),
rootMargin: '0px, 0px, 100px, 0px'
};

現在，對于目標元素，我們來定位幾個圖像：

let  images = [...document.querySelectorAll('.targetImages')];

現在，讓我們看看實現回調:

const callback = (entries) => {

entries.forEach(entry => {
 If (entry.isIntersecting) {
    observer.unObserve('entry.target');
}
// handle other code logic here 
})
}

我們可以繼續調用交集觀察者構造函數來觀察目標元素，基于它的options對象中指定的定制:

let observer = new intersectionObserver(options, callback);

最后，我們可以觀察到要觀察的目標元素：

images.forEach(image => {
observer.observe(image);
})

注意:為了簡單起見，這里不包括HTML和CSS代碼。通過在MDN文檔中查看此示例，您可以詳細了解如何實現此技術。

總結

現在，當我們在網頁上有一堆圖像或視頻，并在瀏覽器DOM初始化時加載它們時，這種技術的優勢就會非常明顯。作為開發人員，我們有責任確保我們管理或維護的平臺的最佳性能，特別是當它們與業務目標相關聯時。

作為一種web性能技術，延遲加載有助于解決這類問題。

以上是JavaScript中的延遲加載是什么的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！