Skip to content

Latest commit

 

History

History
151 lines (120 loc) · 6.58 KB

lazyloading.md

File metadata and controls

151 lines (120 loc) · 6.58 KB
Raw
title date author category
LazyLoading
2020-11-18 16:00:00 -0800
chjjh0
S2_Round1

👀특징

WhaleScreenCapture-20201121-211650

  • 의미: 페이지 진입 또는 현재 보여지는 화면을 기준으로 필요하지 않은 자원들은 필요할 때 로드

  • 활용점: Pagination, Infinite Scroll, Code Splitting

  • 장점
    1.서버 부하 감소 및 사용자 속도 개선

  • 단점
    1.스크롤에 따라 이미지를 로딩하기에 부자연스럽거나 버벅이게 로딩되는 현상을 볼 수 있음
    2.검색엔진에 걸리지 않아 SEO 취약하나 콘텐츠에 대한 링크를 제공하여 보완
    https://scarlett-dev.gitbook.io/all/it/lazy-loading

  • 주의사항
    https://black7375.tistory.com/72
    1.첫 화면에는 하지 않는 것이 나음
      ( 콘텐츠 로드를 미뤄두기 때문에 SEO 좋지 않은 것으로 추정 )
    2.스크롤을 내려야 이미지 로드를 시작해 느려보일수도 있음
    3.자리 표시자가 없으면 레이아웃 변경이 생길 수 있음
      ( placeholder image가 없다면 브라우저 렌더링 악역향 )
    4.JS로 이미지 크기가 큰 이미지를 로딩 시 잠시 반응하지 않을 수 있음
      ( 네트워크 환경에 따른 UX 저하 )
    5.로드가 실패할 수 있음
      ( 네트워크 요청이 실패한 경우 placeholder image나 대체이미지가 없다면 UX 저하 )
    6. JS를 사용하지 못할 수도 있음
      ( 브라우저의 JS 기능이 꺼있다면 동작X )




HTML or Vanilla

1. loading 속성을 활용한 방식

  • img, iframe 에서 loading='lazy' 속성 사용 가능
  • 현재 실험단계
관련 포스팅

https://meetup.toast.com/posts/183
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
https://github.com/mfranzke/loading-attribute-polyfill


2. preload 속성을 활용한 방식

  • video 태그에 preload=none 설정으로 로드 지연
관련 포스팅

https://web.dev/lazy-loading-video/
https://scarlett-dev.gitbook.io/all/it/lazy-loading


3. scroll, resize, orientationChange 이벤트를 활용한 방식

  • 코드 참고한 포스팅: https://frontdev.tistory.com/entry/Image-Lazy-Loading-기법

  • 코드 링크: https://codepen.io/imagekit_io/pen/MBNwKB

  • 링크된 코드의 동작 설명

    HTML구조는 여러 개의 img 요소로 되어 있고 상단 3개의 img 요소에만 src 속성이 설정되어 있어, 초기에 3개의 이미지만 노출

2 lazyloadImages 변수에 img.lazy 클래스명을 가진 img 요소들의 배열 할당 
26~28 scroll, resize, orientationChange 이벤트가 발생하면, 5 lazyload 함수를 실행
10 lazyloadThrottleTimeout 변수에 setTimeout 을 할당하여 추후 6~8 clearTimeout에 활용
11~17 lazyloadImages 배열을 반복하며 img의 offsetTop이 window.innerHeight + scrollTop 보다 작으면 data-src에 할당된 이미지 URL을 img src 속성에 할당하고 class에서 lazy를 제거하여 이미지를 노출
18~22 lazyloadImages가 빈 배열이면 scroll, resize, orientationChange 이벤트를 제거



React

1. React.lazy


2. react-lazyload

  • resize, scroll 기반으로 작동되는 것으로 추정
관련 포스팅

https://github.com/twobin/react-lazyload


3. react-virtualized

  • 현재 사용자에 보여지는 부분만 렌더링하여 최적화
관련 포스팅

https://github.com/bvaughn/react-virtualized
https://bvaughn.github.io/react-virtualized/#/components/List
https://coffeeandcakeandnewjeong.tistory.com/52


4. react-window

  • react-virtualized와 같은 역할이며 보다 경량화
관련 포스팅

https://react-window.now.sh/#/examples/list/fixed-size
https://velog.io/@pandati0710/React-Windowing




Vue

1. Code Splitting with webpack

  • webpack으로 chunk 파일 분할하여 분할된 파일에 대한 요청이 들어왔을 때 서빙
관련 포스팅

https://gongzza.github.io/javascript/vuejs/vue-lazy-loading-with-webpack/
https://router.vuejs.org/kr/guide/advanced/lazy-loading.html

2. vue-lazyload

  • resize, scroll 기반으로 동작하지만, intersection observer도 활용 가능
관련 포스팅

https://github.com/hilongjw/vue-lazyload#readme