✏️ Lazy-loading

Lazy loading

레이지 로딩은 직역하면 게으른 로딩인데, 일을 하지 않는 것이 아니라 늦게 로드하겠다는 개념이다.

 

 

 

 

 

예시로 크몽 사이트를 들어갔다.

사용자가 보고있는것은 여기 메인페이지의 뷰포트까지 화면을 보고있는데,

내용이 많아 아래에 스크롤을 많이 해야하고, 이미지도 많다.

하지만 사용자가 아래까지 구경하기 전에 위에 네비게이션을 클릭해서 다른곳을 이동할 수 있지 않은가?

그럼 메인페이지를 다 보지도 않을건데 전부 로드해야하는가? 그것은 성능저하가 일어날 수 있다.

 

이렇게 되면 화면에 모든 이미지들을 다운로드 받아와야 하기 때문에 성능 저하가 될 수 있고,

사용자가 인터넷이 느린 환경이면 로드되는데 시간이 많이 소요될 수 있다.

그렇게 나온 개념이 레이지 로딩이다.

 

레이지 로딩은 결국 화면에 보이는 부분만 이미지를 먼저 로딩할 수 있게 만들어준다.

사용자가 스크롤을 할 때, 그때 데이터를 가져온다.

 

 

 

 

라이브러리

Lazy loading을 지원해주는 라이브러리가 있다.

 

react-lazyload