JavaScript中的延遲加載是什么

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

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

理解延遲加載API及其工作方式將幫助已經(jīng)使用實現(xiàn)這些技術(shù)的庫和框架的開發(fā)人員了解底層的情況。此外，如果他們打算實現(xiàn)自己的延遲加載庫，他們將能夠執(zhí)行更多的指導(dǎo)研究并應(yīng)用他們學到的技術(shù)。

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

什么是延遲加載?

根據(jù)Wikipedia的介紹，延遲加載是一種設(shè)計模式，用于在需要時推遲元素或?qū)ο蟮某跏蓟?。這意味著僅當用戶在網(wǎng)頁上滾動時，相對于父DOM元素的目標DOM元素才被加載并可見（當兩個元素之間存在交集時，基于設(shè)置的閾值）。

不采用這種模式的缺點可能導(dǎo)致:

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

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

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

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

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

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

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

當然，您現(xiàn)在應(yīng)該已經(jīng)理解了這將導(dǎo)致什么，正如我們前面所討論的。

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

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

本機延遲加載API

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

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

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

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

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

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

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

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

let observer  = new IntersectionObserver (options, callback);

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

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

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

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

而且，接受兩個輸入?yún)?shù)的回調(diào)包括一個我們打算應(yīng)用于目標元素和調(diào)用回調(diào)的觀察者的intersectionObserverEntry對象列表。

回調(diào)的簽名如下:

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元素，并在它與父元素相交時觸發(fā)回調(diào)函數(shù)。目標DOM元素的一個例子如下面的代碼片段所示:

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

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

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

當觀察者為目標設(shè)置的閾值達到時，將觸發(fā)回調(diào)。

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

延遲加載技術(shù)的優(yōu)點

現(xiàn)在，我們必須更好地理解為什么延遲加載web內(nèi)容和資產(chǎn)是必要的。讓我們來看看使用這種技術(shù)的一些進一步的優(yōu)勢:

• 構(gòu)建可高度訪問的web應(yīng)用程序。關(guān)于web可訪問性的討論是今天的首要任務(wù)。使用這種技術(shù)肯定有助于建立一個范圍更廣的平臺

• 高用戶保留。如果web平臺與驅(qū)動業(yè)務(wù)目標以及提供價值相關(guān)聯(lián)，那么實現(xiàn)這種技術(shù)將有助于使平臺變得更加用戶友好。web標準稍后會感謝您的!

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

實施延遲加載

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

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

現(xiàn)在，對于目標元素，我們來定位幾個圖像：

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

現(xiàn)在，讓我們看看實現(xiàn)回調(diào):

const callback = (entries) => {

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

我們可以繼續(xù)調(diào)用交集觀察者構(gòu)造函數(shù)來觀察目標元素，基于它的options對象中指定的定制:

let observer = new intersectionObserver(options, callback);

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

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

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

總結(jié)

現(xiàn)在，當我們在網(wǎng)頁上有一堆圖像或視頻，并在瀏覽器DOM初始化時加載它們時，這種技術(shù)的優(yōu)勢就會非常明顯。作為開發(fā)人員，我們有責任確保我們管理或維護的平臺的最佳性能，特別是當它們與業(yè)務(wù)目標相關(guān)聯(lián)時。

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

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