해당 글은 \"프론트엔드 최적화 가이드\"라는 도서를 기반하여 작성한 글입니다.저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다.
\n네트워크를 확인할 때는 명확한 흐름을 파악할 수 있도록 네트워크에 throttling을 적용합니다. 물론 기본으로 제공되는 ‘Fast 3G’ 나 ‘Slow 3G’ 설정을 적용 할 수 있으나 이번에는 기본 설정보다 조금 더 빠른 환경으로 설정하기 위하여 직접 커스텀 설정을 만들어 보겠습니다.
\n위 코드처럼 스크롤 이벤트를 이용한다면 무거운 로직이 들어가기라도 한다면 브라우저의 메인 스레드에 무리가 갑니다. 성능을 향상시키려다가 오히려 악화시키게 되는 꼴인 거죠. 물론 throtle과 같은 방식으로 처리할 수 있겠지만, 근본적인 해결 방법이 될 수는 없습니다. throttle은 짧은 시간에 여러 번 발생하는 연산을 일정 시간 동안 한 번만 실행하도록 하는 기술입니다. 이러한 문제를 Intersection Observer를 이용하여 해결할 수 있습니다. Intersection Observer는 브라우저에서 제공하는 API입니다. 이를 통해 웹 페이지의 특정 요소를 관찰하면 페이지 스크롤 시, 해당 요소가 화면에 들어왔는지 아닌지 알려 줍니다. 즉, 스크롤 이벤트처럼 스크롤할 때마다 함수를 호출하는 것이 아니라 요소가 화면에 들어왔을 때만 함수를 호출하는 겁니다. 따라서 성능 면에서 scroll 이벤트로 판단하는 것보다 훨씬 효율적입니다. Intersection Observer 사용법 : https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Intersection Observer에 대하여 간략한 내용만 살펴보겠습니다. options는 Intersection Observer의 옵션입니다. 이미지에 Intersection Observer를 활용하여 지연 로딩을 적용해 보겠습니다. 지금부터는 샘플코드 기반으로 설명 드리오니 샘플코드가 없는 분이시면 해당 내용만 알아 두시면 좋을것 같습니다. 여기서는 useEffect 안에서 Intersection Observer를 생성하였습니다. 만약 useEffect를 사용하지 않으면 렌더링할 때마다 인스턴스가 생성되고, 대상 요소를 관찰하게 되면서 대상 요소에 여러 개의 콜백이 실행될 것입니다. 따라서 이와 같은 중복을 방지하고자 useEffect에서 인스턴스를 생성해야 합니다. 또한 생성된 인스턴스는 clean-up 함수에서 이전 코드에서 입력한 console.log 함수에 출력들을 보면 위 사진과 같습니다. entries 값이 배열 형태로 다양한 정보를 담고 있는 것이 보입니다. 이중에서 가장 중요한 값은 바로 이제 다음은 화면에 이미지가 보이는 순간, 즉 콜백이 실행되는 순간에 이미지를 로드하는 일입니다. 이미지 로딩은 img 태그에 src가 할당되는 순간 일어납니다. 따라서 최초에는 img 태그에 src 값을 할당하지 않다가 콜백이 실행되는 순간 src를 할당함으로써 이미지 지연 로딩을 적용할 수 있습니다. 이전에느 img 태그에 src 속성에 바로 해당 이미지 url를 할당하였지만 위 코드에서는 data-src 라는 속성에 이미지 url을 넣었습니다. 이렇게 하면 src 값이 할당되지 않기 때문에 해당 이미지를 로드 하지 않습니다. 그리고 주소를 data-src 속성에 넣은 이유는 나중에 이미지가 뷰포트에 들어 왔을때, data-src에 있는 값을 src로 옮겨 이미지를 로드하기 위해서입니다. 이제 정리하면, 개발자 도구 Network 패널을 확인해보면 최초 페이지 로딩 시에는 해당 이미지가 로드되지 않고 있다가 스크롤이 해당 이미지 영역에 도달하면 이미지가 로드되는 것을 확인 할 수 있습니다. 즉, 최초 페이지 로딩 시에는 보이지 않는 이미지가 우선순위가 높은 콘텐츠(동영상)의 로딩을 방해하지 않고 나중에 필요할 때 로드되는 것입니다.\n
\n\n
\nconst options = {\n root: null,\n rootMargin: \"0px\",\n threshold: 1.0.\n};\n\nconst callback = (entries, observer) => {\n console.log('Entries', entries);\n};\n\nconst observer = new IntersectonObserver(callback, options);\n\nobserver.observe(document.querySelector(\"#targer-element1\"));\n
\n
\nIntersection Observer 적용하기
\nfunction Card(props) {\n const imgRef = useRef(null);\n\n useEffect(() => {\n const options = {};\n const callback = (entries, observer) => {\n console.log('Entries', entries);\n };\n\n const observer = new IntersectionObserver(callback, options);\n\n observer.observe(imgRef.current);\n\n return () => {\n observer.disconnect();\n };\n }, []);\n\n\treturn (\n\t\t<div className=\"Card text-center\">\n\t\t\t<img src={props.image} ref={imgRef}/>\n\t\t\t{...중략...}\n\t\t</div>\n\t);\n}observer.disconnect 함수를 호출함으로써 리소스가 낭비되지 않도록 합니다.isIntersecting 이라는 값입니다. 이 값은 해당 요소가 뷰포트 내에 들어왔는지를 나타내는 값입니다. 이 값을 통해 해당 요소가 화면에 보이는 것인지, 화면에서 나가는 것인지 알 수 있습니다.function Card(props) {\n const imgRef = useRef(null);\n\n useEffect(() => {\n const options = {};\n const callback = (entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n console.log(\"is intersecting\", entry.target.dataset.src);\n entry.target.src = entry.target.dataset.src;\n observer.unobserve(entry.target);\n }\n });\n };\n\n const observer = new IntersectionObserver(callback, options);\n\n observer.observe(imgRef.current);\n\n return () => {\n observer.disconnect();\n };\n }, []);\n\n\treturn (\n\t\t<div className=\"Card text-center\">\n\t\t\t<img data-src={props.image} ref={imgRef}/>\n\t\t\t{...중략...}\n\t\t</div>\n\t);\n}entry.isIntersecting 뷰포트에 해당 이미지가 들어왔을때 entry.target.src = entry.target.dataset.src 이미지 src 속성에 이미지 url을 할당합니다. 그리고 한 번 이미지를 로드한 후에는 다시 호출할 필요가 없으므로 observer.unobserve(entry.target) ‘unobserve’ 메서드를 이용하여 해제합니다.
","frontmatter":{"title":"이미지 지연 로딩","date":"August 08, 2023"}}},"pageContext":{"slug":"/frontendPerformance/lazyImagLoad/","previous":{"fields":{"slug":"/algorithm/leetcode/15/"},"frontmatter":{"title":"leetcode - 3Sum"}},"next":{"fields":{"slug":"/frontendPerformance/imagsSize/"},"frontmatter":{"title":"이미지 사이즈 최적화"}}}}}