< 참고링크 >
모던 자바스크립트
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 둘 다 특정 시간이 지나면 함수가 실행되게 만들어 함수실행횟수를 제어하는 방법이다.
let timerId
const throttle = (callback, time) => {
setTimeout( () => {
callback()
timerId = undefined //초기화
}, time)
}
이제 이 throttle 함수를 onScroll 이벤트가 실행될때 특정 ms마다 실행되도록 하면 무한정으로 이벤트가 실행되는 것을 막을 수 있다.
window.addEventListener('scroll', () => throttle(onScroll(), 250) )
이벤트 제어함수 적용 전 ⇩
이벤트 제어함수 적용 후 ⇩