前端达人

如何深入理解 JavaScript 中的懒加载

懒加载是一种延迟加载非必要内容的方法，直到用户需要查看它为止。与其他加载方法不同，其他加载方法在访问页面时同时加载所有网站资源，而懒加载采取更加谨慎的方式。它延迟显示某些元素，如图片、视频和其他多媒体，直到用户主动与网页进行交互。本文将向您展示如何使用懒加载，以便您的用户在访问您的网站时获得更好的体验。

介绍

网络用户对网站加载时间和性能有很高的期望。加载缓慢的网站可能会增加跳出率并让用户感到不满意。为了应对这一挑战，开发人员不断寻求不同的技术来提高速度和整体用户体验，其中一种方法就是“懒加载”。为了实现懒加载，开发人员使用JavaScript。通过使用JavaScript，Web开发人员可以控制特定元素从服务器获取和渲染到用户屏幕的时间和方式。本文将探讨懒加载的好处、实施方法、对Web性能的影响、挑战和最佳实践。

懒加载的好处

减少带宽使用：加载不必要的资源会消耗大量带宽，影响用户和网站所有者。延迟加载可以通过仅加载所需资源来节省带宽。对于可能不会向下滚动查看整个页面的访问者来说，这将变得有益，因为它可以帮助防止他们超出每月限额。
提高页面速度得分和增强SEO性能：搜索引擎将页面速度视为排名因素之一。通过改善加载时间，延迟加载对Google的PageSpeed等各种工具测量的页面速度得分产生积极影响。更高的页面速度得分改善了SEO，并有助于提高用户留存率和转化率。
减少服务器负载：通过按需获取资源，它有助于更高效地分配服务器负载。它减轻了服务器压力，使其能够处理更多的用户请求。
改进的交互时间(TTI)：交互时间测量网页完全交互所需的时间，允许用户与按钮、链接和其他元素进行交互。通过优先加载重要内容，惰性加载有助于减少TTI，为用户提供更愉悦的浏览体验。
优化移动浏览和改善用户体验：移动设备通常具有有限的处理能力和网络功能。通过采用延迟加载，网站适应这些限制，提供更流畅的体验并减少数据消耗，使其更适合移动设备。用户可以快速与可见内容交互，而无需等待屏幕外资源加载。

JavaScript中实现延迟加载的技术

在JavaScript中，可以通过不同的方法实现延迟加载。然而，两种广泛使用的技术是使用Intersection Observer API来延迟加载图像，以及在滚动事件中实现内容的延迟加载。让我们通过示例来探讨这两种技术，以了解它们的工作原理：

1、使用Intersection Observer API进行图片的懒加载

Intersection Observer API是一个JavaScript API，允许开发人员观察元素与特定祖先或视口的交叉变化。它跟踪目标元素的可见性，并在元素进入或离开视图时通知开发人员。它非常适用于延迟加载图像，因为它在图像进入或离开视口时通知我们，从而允许我们根据需要加载图像。它在一个单独的线程上运行，不会阻塞主JavaScript线程。该API不仅限于图像，还可以用于延迟加载任何内容，例如视频、iframe甚至是生成的页面部分。

多个Intersection Observers可以同时观察同一页上的不同元素。例如，假设您有一个页面上有多个图像，并且希望在用户向下滚动页面时延迟加载这些图像。下面是如何使用Intersection Observer API和原生JavaScript实现延迟加载的方法。要开始，请确保您有一个基本的HTML结构，其中包含带有 img 标签的 data-src 属性，指定图像的实际源URL。我们将使用 data-src 来存储图片的URL，而不是使用传统的 src 属性来实现图片的懒加载。




 Lazy Loading Images


 Lazy Loading Images Example

在我们的JavaScript代码中，我们将创建一个Intersection Observer的实例，并指定一个回调函数，每当观察的元素进入或离开视口时，该函数将被触发。

// Get all elements with the "lazy" class
const lazyImages = document.querySelectorAll(".lazy");
// Create a new Intersection Observer
const observer = new IntersectionObserver((entries, observer) => {
 entries.forEach((entry) => {
  if (entry.isIntersecting) {
   // Load the image when it comes into the viewport
   entry.target.src = entry.target.dataset.src;
   observer.unobserve(entry.target); // Unobserve the image after it's loaded
  }
 });
});
// Observe each lazy image
lazyImages.forEach((image) => {
 observer.observe(image);
});

在上面的代码中，首先使用 document.querySelectorAll(".lazy") 选择所有具有“lazy”类的元素。然后，我们创建一个新的Intersection Observer实例，传入一个回调函数，每当观察的元素（在这种情况下是懒加载的图片）进入或退出视口时触发。当观察到一张图片并进入视口时（即 entry.isIntersecting 为真），我们将其 src 属性设置为 data-src 的值，该值保存了实际的图片URL。这个操作触发了图片的懒加载。然后，我们调用 observer.unobserve(entry.target) 来停止观察图片一旦加载完成以优化性能。

2. 滚动事件上的懒加载内容:

基于滚动事件的方法可以实现高度定制的懒加载实现。您可以完全控制内容何时以及如何加载，使其适用于需要在元素可见时执行特定任务或转换的场景。滚动事件是JavaScript的一个特性，被所有现代浏览器支持。这意味着您不必担心兼容性问题。

对于单页应用程序，其中内容随着用户浏览网站而加载，使用滚动事件可能更直观。与Intersection Observer API最适合图像和特定元素不同，基于滚动事件的懒加载提供了更多的灵活性。您可以将其应用于任何内容或复杂组件，这些内容可能不适合“在视图中”的概念。让我们看一个例子。在这里，您将再次拥有一个基本的HTML结构，其中包含要惰性加载的元素。但是，这次我们不需要像 data-src 这样的特殊属性。




 Lazy Loading Content on Scroll


 Lazy Loading Content Example
 
  Some content to be lazily loaded...
 
 
  More content to be lazily loaded...

在我们的JavaScript代码中，你将会有一个函数 isElementInViewport(element) ，它会检查一个元素是否在视口中，然后定义一个 lazyLoadContent() 函数，该函数使用 document.querySelectorAll(".lazy-content") 遍历所有具有“lazy-content”类的元素。

// Function to check if an element is in the viewport
function isElementInViewport(element) {
 const rect = element.getBoundingClientRect();
 return (
  rect.top >= 0 &&
  rect.left >= 0 &&
  rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
  rect.right <= (window.innerWidth || document.documentElement.clientWidth)
 );
}
// Function to lazily load content
function lazyLoadContent() {
 const lazyContentElements = document.querySelectorAll(".lazy-content");
 lazyContentElements.forEach((element) => {
  if (isElementInViewport(element)) {
   // Add your logic to load the content for the element here
   element.classList.add("loaded");
  }
 });
}
// Attach the lazyLoadContent function to the scroll event
window.addEventListener("scroll", lazyLoadContent);
// Call the function initially to load the visible content on page load
lazyLoadContent();

对于每个元素，它使用 isElementInViewport(element) 检查它是否在视口中，如果为真，则加载该元素的内容。在这个例子中，我们只是给元素添加一个类名“loaded”，但你可以根据你的使用情况自定义这部分。然后，我们使用 window.addEventListener("scroll", lazyLoadContent) 将 lazyLoadContent() 函数附加到滚动事件上。这确保了每当用户滚动页面时都会调用该函数。此外，我们在页面加载时调用 lazyLoadContent() 来加载可见内容。

何时使用懒加载

对于网页开发人员来说，知道何时实施延迟加载是很重要的。明智地使用它以最大化其效果并避免潜在的缺点是至关重要的。延迟加载是那些严重依赖图片的网站必备的优化功能，比如在线作品集、电子商务平台和摄影网站。这些网站通常展示大量高分辨率的图片，这些图片会显著影响初始页面加载时间。

通过延迟加载图片，只有用户视口内或可见区域的图片会最先加载。利用无限滚动或分页来展示大量内容的网页可以从延迟加载中受益。带有交互元素和小部件（如滑块、轮播图和手风琴）的页面也可以利用延迟加载。跨多个页面的长文章或博客文章也可以从延迟加载中受益。与预加载所有页面不同，延迟加载可以在用户滚动到当前页面末尾时获取和加载后续页面。具有资源密集型功能的网站，例如交互式地图、数据可视化和复杂动画，可以使用延迟加载来优化性能。

懒加载的挑战

虽然JavaScript中的懒加载有助于提高网页性能，但也面临一些挑战。与懒加载相关的一些挑战包括：

JavaScript 依赖：延迟加载依赖 JavaScript 来获取和加载所需资源。然而，并非所有用户的浏览器都启用了 JavaScript。在这种情况下，延迟加载的内容可能无法加载，从而给部分用户带来糟糕的用户体验。
复杂的实现：实现延迟加载可能变得复杂，特别是在具有复杂结构和各种类型资源的网站上。管理多个延迟加载元素，确保它们在正确的时间加载，并处理交互可能具有挑战性。
管理图像尺寸：在响应式设计中，懒加载图像在处理不同屏幕尺寸和分辨率时可能会变得具有挑战性。

最佳实践

开发人员应遵循最佳实践，以充分发挥JavaScript中的延迟加载的潜力。在将延迟加载应用于网站之前，要确定应立即加载的重要内容，以创建良好的用户体验。让我们来看一些实施延迟加载的最佳实践：

优化图像和媒体文件：为了优化图像的懒加载，使用适当的图像格式并在不损失质量的情况下进行压缩。使用 srcset 和 sizes 属性实现响应式图像，根据用户的视口提供不同的图像尺寸，节省带宽。
使用占位元素：为了防止内容移动和布局不稳定，使用占位元素来保留懒加载内容的空间。可以使用占位图像或简单的占位符，比如具有定义尺寸和背景颜色的div元素，以保持布局直到实际内容加载完成。
实现Intersection Observer API：Intersection Observer API是一种简化懒加载实现的JavaScript功能。它允许开发人员高效地跟踪元素何时进入视口，从而触发懒加载内容的加载。
为JavaScript禁用的用户提供备选方案：并非所有用户都在其浏览器中启用了JavaScript。为了满足这些用户的需求，为延迟加载的内容提供备选解决方案。例如，使用