• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 스로틀링(Throttling)

스로틀링(Throttling)이란?

스로틀링은 자바스크립트에서 이벤트가 너무 자주 발생하는 것을 방지하고, 성능을 최적화하기 위해 사용되는 기술입니다. 예를 들어, 스크롤 이벤트는 매우 자주 발생할 수 있기 때문에, 이를 그대로 처리하면 성능에 큰 영향을 줄 수 있습니다. 스로틀링은 주기적으로(예: 100밀리초마다) 이벤트를 처리하도록 하여, 이벤트 핸들러가 너무 자주 실행되지 않게 합니다.

왜 스로틀링을 사용할까요?

1. 성능 최적화: 너무 자주 실행되는 이벤트 핸들러는 성능에 부정적인 영향을 미칠 수 있습니다. 스로틀링을 통해 이벤트 핸들러 실행 빈도를 줄이면, CPU 사용률과 메모리 사용을 줄일 수 있습니다.
2. 리소스 절약: 네트워크 요청이나 DOM 조작과 같이 리소스를 많이 사용하는 작업을 제한된 빈도로 실행함으로써, 불필요한 리소스 소비를 줄일 수 있습니다.

무한스크롤에 스로틀링 적용

이제 스로틀링 함수를 무한 스크롤 이벤트에 적용합니다.

위 무한 스크롤에서 제공해드린 실습코드를 보면, 스로틀링이 적용되어있지 않아서 이벤트 핸들러가 자주 실행되고 있었습니다. 방금 배운 스로틀링 개념을 추가하여 성능을 최적화 해 볼까요?

let 타이머;
window.addEventListener("scroll", () => {
	const 스크롤퍼센트 = document.documentElement.scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight)
	if(스크롤퍼센트 < 0.9) return;
	if(타이머) return;
            
	console.log("상자를 그려줍니다.")
	JS_네모상자보여주는기능()

	타이머 = setTimeout(() => {
		clearTimeout(타이머)
		타이머 = null

		const 마지막스크롤퍼센트 = document.documentElement.scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight)
		if(마지막스크롤퍼센트 === 1) JS_네모상자보여주는기능()
	}, 1000)
})

• 타이머 변수를 사용하여 스로틀링을 구현합니다. 이 변수는 일정 시간 동안 이벤트를 처리하지 않도록 설정하는 데 사용됩니다.
• 스크롤 퍼센트가 90% 미만이면 함수를 종료하여 아무 작업도 하지 않습니다.
• 타이머가 설정되어 있으면 함수를 종료하여 중복 실행을 방지합니다.
• 새로운 네모 상자를 추가한 후, 타이머를 설정하여 1초 동안 추가적인 이벤트 처리를 막습니다.
• 1초 후에 타이머를 해제하고, 마지막 스크롤 위치를 확인하여 페이지가 완전히 스크롤된 경우 다시 새로운 네모 상자를 추가합니다.

이렇게 스로틀링을 통해 스크롤 이벤트가 너무 자주 발생하는 것을 막고, 성능을 최적화할 수 있습니다.

📝 실습 코드