JavaScrip Lazy Load - 온더테크

Contents

Lazy 로드(Lazy Load)는 컴퓨터 프로그래밍 및 웹 개발에서 필요한 시점까지 객체의 초기화를 지연시키는 기법을 의미합니다. 즉, 리소스나 데이터가 실제로 필요할 때까지 로드하지 않는 방식으로, 성능 최적화와 자원 절약을 목적으로 사용됩니다. Lazy 로드는 메모리 사용량을 줄이고, 초기 로딩 시간을 단축시키는 데 효과적입니다.

Lazy 로드의 작동 방식

Lazy 로드는 처음부터 모든 데이터를 불러오지 않고, 사용자가 특정 데이터나 리소스를 요청할 때 해당 부분만 로드합니다. 이는 특히 이미지, 비디오, 데이터베이스 레코드 등의 대량 데이터를 다룰 때 유용합니다.

웹 개발에서의 Lazy 로드

웹 개발에서 Lazy 로드는 주로 이미지, 비디오, 기타 미디어 파일의 로딩을 지연시키는 데 사용됩니다. 예를 들어, 웹페이지가 로드될 때 화면에 보이지 않는 이미지들은 처음부터 로드하지 않고, 사용자가 스크롤하여 해당 이미지가 화면에 나타날 때 로드합니다. 이는 페이지 로딩 속도를 크게 개선할 수 있습니다.

Lazy 로드의 예시

HTML과 JavaScript를 이용한 이미지 Lazy 로드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Load Example</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

            if ("IntersectionObserver" in window) {
                let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
                    entries.forEach(function(entry) {
                        if (entry.isIntersecting) {
                            let lazyImage = entry.target;
                            lazyImage.src = lazyImage.dataset.src;
                            lazyImage.classList.remove("lazy");
                            lazyImageObserver.unobserve(lazyImage);
                        }
                    });
                });

                lazyImages.forEach(function(lazyImage) {
                    lazyImageObserver.observe(lazyImage);
                });
            } else {
                // Fallback for browsers that do not support IntersectionObserver
                let lazyLoadThrottleTimeout;
                function lazyLoad() {
                    if (lazyLoadThrottleTimeout) {
                        clearTimeout(lazyLoadThrottleTimeout);
                    }

                    lazyLoadThrottleTimeout = setTimeout(function() {
                        let scrollTop = window.pageYOffset;
                        lazyImages.forEach(function(lazyImage) {
                            if (lazyImage.offsetTop < (window.innerHeight + scrollTop)) {
                                lazyImage.src = lazyImage.dataset.src;
                                lazyImage.classList.remove('lazy');
                            }
                        });
                        if (lazyImages.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);
            }
        });
    </script>
</head>
<body>
    <h1>Lazy Load Example</h1>
    <img data-src="image1.jpg" class="lazy" alt="Lazy Image 1">
    <img data-src="image2.jpg" class="lazy" alt="Lazy Image 2">
    <img data-src="image3.jpg" class="lazy" alt="Lazy Image 3">
</body>
</html>

위 예시에서는 IntersectionObserver API를 사용하여 이미지가 화면에 나타날 때만 로드되도록 구현되었습니다. Fallback 코드를 포함하여 IntersectionObserver를 지원하지 않는 브라우저에서도 작동할 수 있도록 합니다.

Lazy 로드의 장점

성능 향상: 초기 페이지 로드 시간이 단축되어 사용자 경험이 개선됩니다.
대역폭 절약: 사용자에게 필요한 리소스만 로드하므로 불필요한 데이터 전송을 줄입니다.
메모리 효율성: 사용되지 않는 객체를 초기화하지 않아 메모리 사용량을 줄입니다.

Lazy 로드의 단점

복잡성 증가: 구현과 관리가 다소 복잡할 수 있습니다.
SEO 문제: 검색 엔진 크롤러가 Lazy 로드된 콘텐츠를 제대로 인덱싱하지 못할 수 있습니다.
사용자 경험: 사용자가 빠르게 스크롤할 경우 콘텐츠 로딩이 지연되어 부드러운 사용자 경험을 저해할 수 있습니다.

Lazy 로드는 웹 성능 최적화에 필수적인 기술 중 하나로, 적절히 사용하면 사용자 경험을 크게 향상시킬 수 있습니다.

Post Views: 110