SlideShare a Scribd company logo
1 of 15
Download to read offline
디바운싱과
쓰로틀링
프로그래밍 기법
디바운싱과 쓰로틀링 방식에 대한 이해
목차
디바운싱이란?
쓰로틀링이란?
디바운싱과 쓰로틀링 사용 예시 및 코드
디바운싱과 쓰로틀링 차이점
디바운싱 VS 쓰로틀링
마무리
디바운싱이란?
스위치회로에서 사용하는 개념으로,
바운싱 현상을 방지하는 방법을 의미함
바운싱 현상?
Row 상태와 High 상태가 스위치의 on/off로 동작할 때 스위치를 한번만 눌렀음에도
여러번 눌린 것 처럼 작동하는 현상
해당 바운싱 현상을 방지하기 위해서
버튼을 처음 눌렀을 때, 또는 마지막으로 눌렀을 때의 값만 받는 것
프로그램에서 디바운싱
연속해서 호출되는 함수 중 처음이나 마지막 요청을 기준으로
단 한 번의 함수만을 실행시키도록 하는 것 (주로 마지막 요청 기준으로 실행)
쓰로틀링이란?
주로 PC나 하드웨어의 성능 제한과 관련하여 많이 사용되는 개념으로,
발열로 인한 기기의 손상을 막기 위해 클럭이나 인가 전압을 제한하여 발열을 낮추는 기법
함수가 호출 된 이후, 설정 시간이 지나기 전 까지
다시 함수를 호출 하지 못하도록 하는 것
즉, 함수의 호출 빈도 수를 줄임
프로그램에서 쓰로틀링
• ajax 검색
• 폼 버튼 제출
• 스크롤 이벤트
• 브라우저 리사이즈
• 마우스 이동 이벤트
디바운싱과 쓰로틀링 사용 예시
디바운싱 쓰로틀링
디바운싱 사용 예시 및 코드
ajax 검색
before after
쓰로틀링 사용 예시 및 코드
resize 이벤트
before after
직접 타이머 지정하여 구현하는 것 보단
lodash나 underscore.js와 같은 라이브러리 사용을 추천
사용 예시 및 코드
모든 동작이 끝난 후
특정 시간이 지나면 함수 호출
연이은 요청 중 단 한번만 호출하도록 보장 지정시간에 무조건 한번은 호출하도록 보장
디바운싱과 쓰로틀링 차이점
디바운싱 쓰로틀링
첫 함수 호출 뒤
특정 시간이 지나면 다시 호출
디바운싱 VS 쓰로틀링
같은 동작이라도 개발 우선 순위에 따라 선택
ex) 지도Api 호출
마무리
디바운싱과 쓰로틀링 방식의 차이점을 이해하고 각 상황에 맞게 적절히 적용하여
서비스의 성능 및 비용을 개선하면 좋겠다.
Reference
https://guiyomi.tistory.com/122
https://www.youtube.com/watch?v=By49qqkzmzA
https://hengxi.tistory.com/21
https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794
fa

More Related Content

More from Wonjun Hwang

얕은복사,깊은복사
얕은복사,깊은복사얕은복사,깊은복사
얕은복사,깊은복사Wonjun Hwang
 
Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Wonjun Hwang
 
완전 유용한 CSS 모음
완전 유용한 CSS 모음완전 유용한 CSS 모음
완전 유용한 CSS 모음Wonjun Hwang
 
2024 개발 트렌드
2024 개발 트렌드2024 개발 트렌드
2024 개발 트렌드Wonjun Hwang
 
스마트한 팀 협업
스마트한 팀 협업스마트한 팀 협업
스마트한 팀 협업Wonjun Hwang
 
구름톤 8기 후기
구름톤 8기 후기구름톤 8기 후기
구름톤 8기 후기Wonjun Hwang
 
2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드Wonjun Hwang
 
오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기Wonjun Hwang
 
컴포넌트 설계
컴포넌트 설계컴포넌트 설계
컴포넌트 설계Wonjun Hwang
 
Flutter & Firebase
Flutter & FirebaseFlutter & Firebase
Flutter & FirebaseWonjun Hwang
 
이미지 최적화
이미지 최적화이미지 최적화
이미지 최적화Wonjun Hwang
 
프론트엔드 비동기 프로그래밍
프론트엔드 비동기 프로그래밍프론트엔드 비동기 프로그래밍
프론트엔드 비동기 프로그래밍Wonjun Hwang
 

More from Wonjun Hwang (20)

얕은복사,깊은복사
얕은복사,깊은복사얕은복사,깊은복사
얕은복사,깊은복사
 
Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기
 
완전 유용한 CSS 모음
완전 유용한 CSS 모음완전 유용한 CSS 모음
완전 유용한 CSS 모음
 
2024 개발 트렌드
2024 개발 트렌드2024 개발 트렌드
2024 개발 트렌드
 
Passkey
PasskeyPasskey
Passkey
 
스마트한 팀 협업
스마트한 팀 협업스마트한 팀 협업
스마트한 팀 협업
 
AI News '23.12
AI News '23.12AI News '23.12
AI News '23.12
 
Google Analytics
Google AnalyticsGoogle Analytics
Google Analytics
 
구름톤 8기 후기
구름톤 8기 후기구름톤 8기 후기
구름톤 8기 후기
 
2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드
 
상속과 구현
상속과 구현상속과 구현
상속과 구현
 
오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기
 
컴포넌트 설계
컴포넌트 설계컴포넌트 설계
컴포넌트 설계
 
성능 테스트
성능 테스트성능 테스트
성능 테스트
 
WebRTC
WebRTCWebRTC
WebRTC
 
Flutter & Firebase
Flutter & FirebaseFlutter & Firebase
Flutter & Firebase
 
SOLID
SOLIDSOLID
SOLID
 
MSW
MSWMSW
MSW
 
이미지 최적화
이미지 최적화이미지 최적화
이미지 최적화
 
프론트엔드 비동기 프로그래밍
프론트엔드 비동기 프로그래밍프론트엔드 비동기 프로그래밍
프론트엔드 비동기 프로그래밍
 

디바운싱과 쓰로틀링