Image LazyLoading
페이지 내에서 실제로 필요할 때까지 리소스의 로딩을 미루는 것
👆 전체 페이지에서 모든 이미지를 받아오지 않고 스크롤을 내릴 때마다 받아옴
페이지 초기 로딩 시 필요한 이미지 수를 줄일 수 있음
필요한 부분 먼저 받아오면서 필요하지 않은 사진들을 받아오지 않아도 되므로 유저가 빠르게 이용할 수 있고 비용이 감소함
적용 방법
html 은 img 태그의 src="이미지 주소" 를 읽으면 이미지를 무조건 로드함
lazy loading 을 위해서 src 속성이 아닌 다른 태그를 사용해서 이미지 url을 지정함
<img data-src="이미지 주소" />
이렇게 이미지 로드를 사전에 막고, 언제 로딩할 것인지(뷰포트에 들어오면 로딩하라!) 알려주면 된다.
방법으로는
1. window scroll event
2. observer API 를 사용하는 방식
중요한 건 사진을 불러올 때 data-src 태그를 src 태그로 바꾸어서 불러온다는 것
+ observer API 쓸 경우에 미리미리 사진을 받아온다면 스크롤을 내렸을 때 유저가 placeholder 를 보지 않고도 사진을 바로 확인할 수 있음
요약
src 속성을 사용하면 이미지를 무조건 로드함
=> 보여질 부분만 이미지를 src 속성으로 바꾸어주기
+ throttling 과 debouncing을 사용해서 과부하 막아주기
throttling : 마지막 함수를 호출한 후 일정 시간 지나기 전에 다시 호출되지 않도록 하는 것 (setTimeout 주로 사용)
debounce : 함수가 연이어 호출된다면 가장 마지막 함수만 호출하는 것 (setTimeout 주로 사용)
느낀점
image 최적화를 잠깐 알아보았는데
결국 observerAPI 나 window 스크롤 이벤트를 사용한다는 점에 있어서는 크게 어렵다는 느낌을 받지 않았다.
참고한 블로그에서는 이미지를 완벽히 로드하기 전에 보여주는 placeholder도 적용하는 법도 소개했는데
사실 사진을 미리미리 받아온다면 해결될 수 있는 문제라 생각하여 자세히 들여다보진 않았다.
무한 스크롤은 쿼리스트링으로 값을 보내어 뷰포트에 걸릴 때마다 10장, 20장, 30장 (if let limit=10) 받아왔는데
오늘 학습한 내용은
1. 이미지를 통으로 받아서
2. 바로바로 보여주는 게 아닌 잘라서 보여주기 (성능을 위해)
이다.
이렇게도 최적화를 할 수 있구나했고
catbow-convertPage 에 라이브러리를 적용하며 사진을 받아올 때 잘라서 받았던 로직이 생각났다
원래는 통으로 받아왔으나
// ...Catbow.tsx
const [ejectRatio, setEjectRatio] = useState(0);
const imgGetController = useRef({
1: false,
2: false,
3: false,
});
...
if (!imgGetController.current[3] && ejectRatio > 50) {
fetchImages({ start: 521, end: 703 });
imgGetController.current[3] = true;
} else if (!imgGetController.current[2] && ejectRatio > 20) {
fetchImages({ start: 281, end: 520 });
imgGetController.current[2] = true;
} else if (!imgGetController.current[1] && ejectRatio >= 0) {
fetchImages({ start: 1, end: 280 });
imgGetController.current[1] = true;
}
스크롤의 비율을 통해서 사진들을 미리 받아와야했으므로
isIntersecting 의 boolean 값이 아닌 isIntersecting Ratio 값을 사용해서 사진들을 미리 불러왔었다
👇 통으로 미리 받아왔던 블로깅
출처
'TIL' 카테고리의 다른 글
e.target, e.currentTarget 차이 (0) | 2023.04.30 |
---|---|
git은 파일명/폴더명 대소문자 구별 못함 (1) | 2023.04.29 |
프로그래머스 다음 큰 숫자 풀이 (0) | 2023.04.17 |
코드 스플리팅 (0) | 2023.04.16 |
next.js 학습 (1) (0) | 2023.04.14 |
댓글