JavaScript의 지연 로딩에 대해 자세히 알아보기

이 글에서는 웹에서 지연 로딩이 어떻게 작동하는지 살펴보겠습니다. 지연 로딩이 구현되는 방법, 지연 로딩의 중요성과 장점, 그리고 마지막으로 지연 로딩 웹 콘텐츠에 대한 간단한 사용 사례 등 기본 지연 로딩 API를 다룰 것입니다.

지연 로딩 API와 그 작동 방식을 이해하면 이러한 기술을 구현하는 라이브러리와 프레임워크를 이미 사용하고 있는 개발자가 내부에서 무슨 일이 일어나고 있는지 이해하는 데 도움이 됩니다. 또한 자체 지연 로딩 라이브러리를 구현할 계획이라면 더 많은 안내 연구를 수행하고 배운 기술을 적용할 수 있을 것입니다.

실제 사용 사례의 경우 플랫폼의 광고에서 수익을 창출하는 마케팅 및 광고 회사는 지연 로딩을 쉽게 최적화하고 적용하여 플랫폼을 방문하는 사용자에게 어떤 광고가 표시되는지 쉽게 판단하여 더 나은 비즈니스 결정을 내릴 수 있습니다.

추천 튜토리얼: "JavaScript 비디오 튜토리얼"

지연 로딩이란 무엇인가요?

Wikipedia에 따르면, 지연 로딩은 필요할 때 요소나 객체의 초기화를 연기하는 데 사용되는 디자인 패턴입니다. 이는 사용자가 웹 페이지에서 스크롤할 때만 상위 DOM 요소와 관련된 대상 DOM 요소가 로드되고 표시된다는 것을 의미합니다(두 요소 사이에 교차점이 있을 때 설정된 임계값을 기반으로 함).

이 패턴을 채택하지 않을 경우의 단점은 다음과 같습니다.

• 하나 이상의 소스에서 여러 이미지 또는 기타 웹 리소스를 가져오기 위한 여러 동시 네트워크 요청 또는 일괄 요청으로 인해 페이지 성능이 심각하게 지연됩니다.

• 페이지 로드 증가 다운로드/가져오기에 패키지 크기로 인한 시간

• 낮은 사용자 유지율, 주로 인터넷 연결 상태가 좋지 않은 지역에 적합합니다. 우리 개발자가 초기에 지연 로딩을 구현하지 않는 실수를 저지르면 사용자가 플랫폼을 완전히 사용하지 않는 경우가 많습니다

• 이미지, iframe, 비디오와 같은 리소스나 자산의 부적절한 처리로 인해 웹에 미치는 영향 성능 및 접근성 엄청난 영향

현재 대부분의 최신 브라우저는 웹에서 지연 로딩을 지원합니다. 그러나 아직 이 지원을 제공하지 않는 브라우저의 경우 이 기술을 구현하는 shim 또는 라이브러리는 그 위에 간단한 API 레이어를 제공합니다.

지연 로딩은 초기 페이지 로드 시간을 줄이는 문제를 해결합니다. 즉, 사용자가 웹 페이지를 초기화할 때와 페이지를 스크롤할 때 확인해야 하는 이미지나 기타 콘텐츠 등의 리소스만 표시합니다.

우리 모두 알고 있듯이 웹 성능 및 접근성 문제는 다면적입니다. 페이지 크기, 메모리 공간 및 일반 로드 시간을 줄이면 웹 플랫폼에 많은 영향을 미칠 수 있습니다. 지연 로딩의 장점은 많은 이미지와 비디오가 있고 브라우저 DOM이 초기화될 때 한꺼번에 로드될 때 분명해집니다.

물론, 앞서 논의한 것처럼 이것이 어떤 결과로 이어질지 이제 이해해야 합니다.

데이터에 따르면 대부분의 웹사이트는 타겟 고객에게 정보를 전달하기 위해 이미지와 동영상, iframe 등의 기타 웹 콘텐츠에 크게 의존하고 있습니다. 이는 사소하고 단순해 보일 수 있지만, 이 콘텐츠를 사용자에게 표시하는 방식에 따라 궁극적으로 플랫폼의 성능이 결정됩니다.

또한 페이지 로드 시간을 최적화하는 데 도움이 되는 작업(예: 사용자가 페이지의 특정 부분으로 스크롤하는지 여부에 따라 달라지는 이벤트)은 지연 로드의 일부 사용 사례입니다. 이 기사를 계속하면서 실제 환경의 다른 사용 사례에 대해 자세히 알아 보겠습니다.

Native Lazy Loading API

Lazy Loading은 상위 요소의 요소가 브라우저 뷰포트 내에서 사용 가능하거나 표시될 때 라는 대상을 감지하거나 알 수 있는 방법을 제공하는 브라우저 API인 Intersection Observer API를 기반으로 합니다. (적절하게).

이런 일이 발생하면 나중에 살펴보겠지만 코드 로직의 다른 부분을 처리하는 데 도움이 되는 핸들러 함수가 호출됩니다.

이 새롭고 향상된 브라우저 API를 사용하면 두 개의 DOM 요소가 교차하는 시기도 알 수 있습니다. 즉, 대상 DOM 요소가 브라우저의 뷰포트에 들어가거나 다른 요소(아마도 상위 요소)와 접촉하는 시기를 의미합니다.

지연 로딩이 어떻게 작동하는지 더 잘 이해하려면 먼저 교차 관찰자를 만드는 방법을 이해해야 합니다. 교차점 관찰자를 생성하기 위해 우리가 해야 할 일은 교차점 관찰자 이벤트가 발생하는 것을 수신하고 그러한 이벤트가 발생할 때 실행할 콜백 함수 또는 핸들러를 트리거하는 것뿐입니다.

교차점 관찰자 이벤트는 DOMContentLoaded 이벤트를 포함하는 문서 이벤트 카테고리와 유사한 브라우저 이벤트입니다.

참고: 교차로 이벤트의 경우 교차로를 적용할 요소를 지정해야 합니다. 이 요소를 루트 요소라고도 합니다. 그러나 루트 요소가 지정되지 않으면 전체 브라우저 창을 대상으로 한다는 의미입니다.

또한 필요한 경우 교차점에서 모양이나 크기를 쉽게 변경할 수 있도록 루트 요소(제공된 경우)에 공백을 지정해야 합니다. 더 잘 이해하기 위해 예를 살펴보겠습니다.

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

let observer  = new IntersectionObserver (options, callback);

위의 코드 조각에서 관찰자를 생성하는 간단한 사용 사례를 볼 수 있습니다. options 개체는 대상에 대한 사용자 정의 속성을 정의하는 데 도움이 됩니다. 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()

반면, 루트 요소는 웹 페이지를 스크롤할 때 대상 요소가 사용자에게 표시될 때 대상 요소의 뷰포트 역할을 하는 상위 요소입니다. 루트가 비어 있으면 상위 요소가 자동으로 뷰포트가 됩니다. 마지막으로 rootMargin은 루트 요소 주위에 여백을 설정하는 데 도움이 됩니다. 예를 들어 대상 요소와 상위 요소/뷰포트 간의 교차점을 계산하기 전에 대상 요소의 크기, 여백 또는 크기를 조정해야 할 수 있습니다.

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

로그인 후 복사
• IntersectionObserverEntry 개체는 상위 요소와 대상 요소 사이에 교차점이 있음을 나타냅니다. API에는 isIntersection, intersectionRatio, intersectionRect, target, 를 포함한 여러 속성이 있습니다. 시간 등
  특정 DOM 요소를 대상으로 하고 해당 요소가 상위 요소와 교차할 때 콜백 함수를 트리거해야 합니다. 다음 코드 조각에는 대상 DOM 요소의 예가 나와 있습니다.

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

로그인 후 복사
• 위 코드 조각에서는 대상 요소를 만들고 여기에 변수를 할당했습니다. 그 후 다음과 같이 IntersectionObserver 생성자/함수 시그니처의 관찰 메서드를 사용하여 대상 요소를 관찰합니다.

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

  로그인 후 복사
  대상에 대해 관찰자가 설정한 임계값에 도달하면 콜백이 트리거됩니다.
• 마지막으로 observe() 메서드는 관찰할 대상 요소가 무엇인지 관찰자에게 알려줍니다. 교차 관찰자에는 API에 unObserve(), takeRecords(), observe() 등의 여러 메서드도 있다는 점에 유의하세요. . 몇 가지 예.

이제 웹 콘텐츠와 자산의 지연 로딩이 필요한 이유를 더 잘 이해해야 합니다. 이 기술을 사용하면 얻을 수 있는 몇 가지 추가 이점을 살펴보겠습니다.

지연 로딩 구현

let observer = new intersectionObserver(options, callback);

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

위 내용은 JavaScript의 지연 로딩에 대해 자세히 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!