성능 최적화하기 - (7) Element Lazy Loading

 

 

◽ 문제상황

동영상이 메인컨텐츠이지만 이미지가 먼저 다운로드되고 여유가 있을 때 동영상이 다운로드 된다.

따라서 그 전에는 pending 된 상태로 렌더링이 되지 않은 화면이 사용자에게 보여진다.

 

 

아래와 같은 해결책이 있다.

1. 이미지를 빠르게 다운로드한다. => 하지만 궁극적인 해결방법이 아니다.

2. ⭐️  lazy loading을 사용한다.

 

 

 

◽ lazy loading이란?

element가 화면에 보여져야 할 타이밍에 element를 그린다.

이미지가 보여지는 부분까지 스크롤이 되었느냐 되지않았느냐로 판단하기때문에 스크롤 이벤트를 사용한다.

 

 

 

◽ Intersection Observer(=관찰자)의 사용

첫번째 인자는 콜백함수, 두번째 인자는 옵션을 사용한다.

boxElement는 Dom Element로 Observer에 관찰되는 상태가 되며 화면에 해당 element가 보일 때 실행된다.

 

[예시]

function createObserver() {
  let observer;

  let options = {
    root: null,
    rootMargin: "0px",
    threshold: buildThresholdList()
  };

  observer = new IntersectionObserver(handleIntersect, options);
  observer.observe(boxElement);
}

[종류]
//   entry.boundingClientRect
//   entry.intersectionRatio
//   entry.intersectionRect
//   entry.isIntersecting
//   entry.rootBounds
//   entry.target
//   entry.time

 

[적용 예제]

import React, {useEffect, useRef} from 'react'

function Card(props) {
	const imgRef = useRef(null)

	// 최초에 한 번만 실행하기 위해 useEffect를 사용한다.
	useEffect(() => {
		const callback = (entries, observer) => {
			// entries: observer 객체들을 담은 배열
			// 아래의 경우처럼 총 3번 실행된다.
			// 1. 지정한 엘레멘트 화면에 보이는 순간
			// 2. 지정한 엘레멘트 화면에 안 보이는 순간
			// 3. 옵저버 객체 생성 되는 순간
			entries.forEach(entry => {
				if(entry.isIntersecting) {
					entry.target.src = entry.target.dataset.src
					// 'unobserver'를 사용하여 최초 한번만 실행되도록 한다.
					observer.unobserve(entry.target)
				}
			});
		}
		const options = {}
		const observer = new IntersectionObserver(callback, options)
		observer.observe(imgRef.current)
	}, [])

	return (
			<div className="Card text-center">
				<img data-src={props.image} ref={imgRef}/>
				<div className="p-5 font-semibold text-gray-700 text-xl md:text-lg lg:text-xl keep-all">
					{props.children}
				</div>
			</div>
	)
}

export default Card

 

 

 

---

 

 

출처

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1 - 인프런 | 강의

Intersection Observer API - Web API | MDN