详细了解JavaScript中的延迟加载-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

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

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

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

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

什么是延迟加载?

根据Wikipedia的介绍，延迟加载是一种设计模式，用于在需要时推迟元素或对象的初始化。这意味着仅当用户在网页上滚动时，相对于父DOM元素的目标DOM元素才被加载并可见（当两个元素之间存在交集时，基于设置的阈值）。

不采用这种模式的缺点可能导致:

目前，大多数现代和更新的浏览器在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元素的一个例子如下面的代码片段所示:

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

在上面的代码片段中，我们创建了一个目标元素并为它分配了一个变量。之后，我们使用intersectionObserver构造函数/函数签名上的observe方法观察目标元素，如下所示:

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者