详细了解JavaScript中的延迟加载

在这篇文章中，我们将看看延迟加载在web上是如何工作的。我们将介绍本地延迟加载API——延迟加载是如何实现的，延迟加载的重要性和优点，最后是一个简单的延迟加载web内容用例。

理解延迟加载API及其工作方式将帮助已经使用实现这些技术的库和框架的开发人员了解底层的情况。此外，如果他们打算实现自己的延迟加载库，他们将能够执行更多的指导研究并应用他们学到的技术。

对于一个真实的用例，那些通过平台上的广告获得收入的营销和广告公司可以很容易地优化和应用延迟加载，从而很容易地判断哪些广告被访问他们平台的用户看到，从而做出更好的商业决策。

推荐教程：《JavaScript视频教程》

什么是延迟加载?

根据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中的延迟加载的详细内容，更多请关注其它相关文章！