[CS지식] Lazy Loading이란?

1. Lazy Loading이란 무엇인가?

정의
로딩을 바로 하지 않고 지연시켰다가 로딩을 나중에 해준다는 뜻

장점
1) 사용자가 처음 웹사이트에 접근할 때 리소스의 일부만 다운로드 되기 때문에 콘텐츠의 제공 속도가 빠르다. 즉 성능이 향상된다.
2) 콘텐츠가 지속적으로 공급되기 때문에 사용자가 웹사이트를 이탈할 확률을 낮출 수 있다.
3) 사용자가 필요로 하는 경우에만 콘텐츠를 불러오기 때문에 배터리, 시간, 시스템 부담 등이 낮아진다. 즉 비용이 감소된다.

이미지 태그를 이용한 lazy loading 방식

<img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image5.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image6.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image7.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image8.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image9.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-400,h-300" />
document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages = document.querySelectorAll("img.lazy");    
  var lazyloadThrottleTimeout;

  function lazyload () {
    if(lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }    
 
    lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
    }, 20);
  }

  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
});

※ 무한 스크롤(Lazy Loading과 비슷하나 약간 다름)

사용자의 스크롤 깊이를 계산하고 있다가, 페이지 끝에 다달았을 때 데이터를 요청하는 방식

useEffect(() => {
		const onScroll = () => {
			if ( "document 높이" - 300 < "view port 높이" + "스크롤 깊이" ) {
					"server에 요청을 보냄"
				}
			}
		};
         
		window.addEventListener('scroll', onScroll);
		return () => {
			window.removeEventListener('scroll', onScroll);
		};
	}, [...]);