프론트엔드 개발자가 되기위한 여정 -33

이정우·2022년 10월 18일
0

frontend-bootcamp

목록 보기
35/60

밸! 하~

밸로그 여러분 안녕하세요

오늘은

preLoad와 lazyload의 차이와 개념에 대해서 알아볼수있도록 하겠습니다

먼저 preload란 무엇일까요??

preLoad란

말 그대로 미리 받아서 온다라는 뜻입니다

다음페이지에서 볼것을 미리 데이터를 받아서 cashing 을 한다는 것입니다

그럼 반대로 Lazyload란 무엇일까요?

lazyLoad란

스크롤을 내릴때 조금씩 받아오는것을 lazyLoad라고 합니다
처음 랜더링이 되어질때 바로 보여지는 부분만을 보여주고
아래로 내릴때 이미지나 데이터를 받아옵니다

이Page가 preLoad로 되었는지 아니면 LazyLoad로 됬는지는
개발자도구의 network창을 보면 알수가 있는데요

처음에 한번에 불러와지는것이 아닌 스크롤을 내릴때마다 새로운것을 불로온다면 LazyLoad가 된다는것을 알 수 있습니다

그럼 이번엔 각각의 장,단점을 알아볼까요??

먼저

preLoad의 장점

preLoad의 장점으로는
사전에 데이터들을 불러오게 되어서 페이지 이동이나 한페이지 내부의 이미지를 미리 불러와서
페이지가 그려질때 이미지또한도 같이불러와 느려짐 없이 볼 수 있다는 것입니다

그럼 이번에는
LazyLoad의 장점은 무엇인지 봐볼까요??

lazyLoad의 장점

lazyLoad의 장점으로는
처음 보여지는 화면의 데이터들을 불러와서 PreLoad와는 다르게 빠르게 첫 화면을 보여줄수가 있게됩니다
또한 메모리의 낭비가 줄어들게 되는데요

예를들어
한 유저가
페이지를 접속한이유가 그 페이지를 통해 다른페이지를 가고싶은거라면
불필요하게 그 아래에 있는 Contents들을 불러올 이유는 없겠죠??

이런식으로 Lazyload의 경우에는 메모리의 낭비를 줄일수가 있습니다

그럼 이제 단점들을 알아볼까요 ??

먼저

preLoad의 단점

PreLoad의 단점으로는
미리 모든데이터를 불러오기때문에 처음 보여지는 화면 구성이 늦게 구현될수도 있다는것입니다
사용자들이
처음 페이지에 접속을 했는데 화면이없이 흰색페이지에 있게된다면 유저들은 쉽게 떠나게 되겠죠??

그렇기에 UX측면을 고려하면 Lazy에 비해 조금 부족하다고 생각이 들수도 있습니다

반대로
lazyLoad의 단점에 대해서 알아볼까요??

lazyLoad의 단점

lazyload의 단점으로는
preload와는 다르게
사전에 모든데이터를 받아오는게 아니다보니 비록 처음화면이 바로보일지라도 그 화면밖에있는 페이지의 내용들을 불러오는데시간이 발생하여 지속적인 기다림을 발생시킬수 있다는것입니다!

유저가 페이지에 처음 접속했을떄 preload에 비해서 빠르게 첫 화면을 볼수있지만
preload에 비해서 페이지내부에서 스크롤을 내릴때 데이터를 늦게받아와 중간중간 멈추는것처럼 보일수도 있다는 것입니다!

자 오늘의 포스팅은 여기까지 입니다!

오늘은 PreLoad와 Lazyload에 대해서 알아보았는데요!
각각의 장점과 단점이 다 있다는것
그렇다면 페이지의 성능향상을 위해서 어떤것을 선택하면좋을지 순간순간마다 고민해서 적용시키면 좋겠죠??

그럼 오늘도 지식한개씩 쌓아서 가보게용!

다들 밸!바~

profile
주니어 프론트엔드 개발자

0개의 댓글