progressBar

괴발·2023년 3월 5일
0

mission im_possible

목록 보기
5/6

< 참고링크 >
모던 자바스크립트
Debounce&throttle
스크롤이벤트의 문제점과 성능개선

프로그래스바는 요소사이즈를 활용하여 스크롤의 현재 위치를 찾고 이를 % 형태로 파악하여 화면에 적용한다.

요소사이즈와 스크롤의 위치를 이용한 프로그래스바

scrollHeight 가 전체 콘텐츠의 길이 라고 한다면
현재 화면에 보여지는 콘텐츠의 높이 clientHeight를 뺀 값은
화면에 보이지 않는 남은 콘텐츠의 높이가 된다.
화면에 보이지 않는 남은 콘텐츠의 높이를 현재의 스크롤 위치 scrollTop 으로 나누고 100을 곱하면
현재 화면에 보이는 콘텐츠를 제외한 나머지 콘텐츠의 몇% 남았는지를 알 수 있다.
그리고 이를 미리 구현해둔 html-css에 적용하면 훌륭한 progressBar가 완성된다.

const height = 
      document.documentElement.scrollHeight - 
      document.documentElement.clientHeight
    
const scrollTop = document.documentElement.scrollTop

const width = (scrollTop / height) * 100

$progressBar.style.width = width + '%' // css = width: 0%;

이벤트 실행 시점을 제어하는 debounce & throttle

프로그래스바 같은 스크롤 이벤트는 보기와 다르게 많은 리소스를 잡아먹는다.
그래서 debounce디바운스나 throttle스로틀 처럼 이벤트 실행 시점을 제어해 리소스 소비를 줄여 성능개선에 힘쓰는 것도 좋은 방법이다.
debounce & throttle 둘 다 특정 시간이 지나면 함수가 실행되게 만들어 함수실행횟수를 제어하는 방법이다.

debounce

  • debounce: 특정 시간이 지난 후 하나의 이벤트만 발생시키는 방법
  • 예시) 버튼 중복 클릭 방지

throttle

  • throttle: 일정한 주기마다 이벤트를 발생시키는 방법
  • 예시) 스크롤 이벤트

let timerId

const throttle = (callback, time) => {
  setTimeout( () => { 
    callback() 
    timerId = undefined //초기화
  }, time)
}

이제 이 throttle 함수를 onScroll 이벤트가 실행될때 특정 ms마다 실행되도록 하면 무한정으로 이벤트가 실행되는 것을 막을 수 있다.

window.addEventListener('scroll', () => throttle(onScroll(), 250) )


이벤트 제어함수 적용 전 ⇩

이벤트 제어함수 적용 후 ⇩

profile
괴발개발

0개의 댓글