LazyLoad
lazyload는 페이지를 불러오는 시점에 당장 필요하지 않은 리소스들을 추후에 로딩하게 하는 기술이다. 즉, 사용자가 보지 않는 것들을 당장 로딩하지 않는다. 그러다가 나중에 사용자가 필요로 하는 시점에 로딩하는 것이다.lazyload 없이 구현된 웹 페이지를 사용자가 접근하면 그 안에 있는 내용이 모두 다운로드 된다. 만약 사용자가 웹 페이지의 모든 컨텐츠를 실제 이용한다면 첫 로딩이 조금 느리더라도 문제가 크진 않다. 하지만 만약 최상단의 이미지만 확인하고 나가버리면 낭비가 발생한다. 이런 문제를 해결하기 위해 lazy loading 기법이 나왔다.
useEffect(() => {
const onScroll = () => {
if ( "document 높이" - 300 < "view port 높이" + "스크롤 깊이" ) {
"server에 요청을 보냄"
}
}
};
window.addEventListener('scroll', onScroll);
return () => {
window.removeEventListener('scroll', onScroll);
};
}, [...]);무한스크롤이 lazyload의 예시이다. 무한 스크롤은 사용자의 스크롤 깊이를 계산하고 있다가, 페이지 끝에 다달았을 때, 데이터를 요청하는 방식으로 구현하게 된다.
lazyload의 장점은 사용자가 처음 웹사이트에 접근할 때 리소스의 일부만 다운로드 되기 때문에 콘텐츠의 제공 속도가 빠르다. 즉 성능이 향상된다. 콘텐츠가 지속적으로 공급되기 때문에 사용자가 웹사이트를 이탈할 확률을 낮출 수 있다. 사용자가 필요로 하는 경우에만 콘텐츠를 불러오기 때문에 배터리, 시간, 시스템 부담 등이 낮아진다. 즉 비용이 감소된다.
PreLoad
preload는 특정 리소스를 빠르게 로딩하도록 우선순위를 부여하는 방법이 바로 Pre Load를 지정하는 방식이다.
<head>
<link rel="preload" as="script" href="super-important.js">
<link rel="preload" as="style" href="critical.css">
</head>Head 태그에 빠르게 로딩시킬 파일을 Pre Load로 지정하게 되면, 페이지 요청 시 해당 소스 자원을 우선적으로 로드를 수행하게 된다. 그래서 super-important.js와 critical.css 파일이 먼저 로드가 된다.
