Debounce와 Throttling
개발을 하다보면 event listener를 붙여야 되거나, 서버에 request를 보낼 일이 많다.
다만, 어떤 함수가 연속적으로 불리는데, 함수의 실행에 있어서 불필요한 함수실행이 있다면 이것들을 줄이는것이 효율성을 높이는데 도움이 된다.
예를 들자면 브라우저창의 크기를 DOM에 계속 붙이는 코드가 있다고 가정해보겠다.
간단하게 html div element를 생성한 후에, js코드로 브라우저에 event listener를 붙여줬다.
브라우저창의 크기가 변화될 시에 곧바로 ctn dom element의 child로 브라우저의 크기를 append해주는 코드이다.
이 코드를 브라우저가 실행하게 된 후에, 브라우저 창의 크기를 변경한다면 그 결과를 볼 수가 있다.
DOM에 수많은 p element를 div의 자식으로 붙여준 것을 볼 수가 있다.
물론, 개발자가 의도가 브라우저의 매순간의 크기를 출력하거나 이용하는것이 맞다면 이러한 코드가 정답일 것이다.
다만, 브라우저 창의 크기의 매순간이 아니라 브라우저 창의 최종적인 크기만을 가지고 싶다면 Debounce 기술을 사용하는 것이 더욱 바람직할지도 모른다.
위의 Debounce의 개념을 이용하여 브라우저창의 크기에 resize event listener를 붙여주었다. 브라우저창의 크기가 변경된지 1초 이내로 같은 형태의 event가 발생되지 않는다면, 최종적으로 p element가 ctn의 child로 append가 되게 된다.
이러한 개념을 이용하여 불필요한 함수의 실행을 억제 할 수 있다.
Debounce와 비슷한 개념으로 있는것이 throttling이 있다.
Throttling은 어떠한 일이 일어난 후, 일정한 시간동안은 동일한 일이 일어나지 않게끔 방지해주는 역할을 한다.
예를 들자면 사용자가 웹사이트에서 활동을 하고 있는지를 판단하고 싶다고 개발자가 생각을 한다. 좋은 예시가 아닐수도 있겠지만, 개발자는 사용자의 마우스의 움직임을 통해 알고 싶어한다.
개발자는 웹사이트의 전반적인 부분에 마우스의 움직임을 듣는 listener를 붙여줌으로써 그 문제를 해결하고자 한다.
예를 들어보자.
트로틀에 X자가 붙어있는 숫자는 이 근처에 마우스가 움직일 때 즉각적으로 1씩 증가하는 평범한 함수. 그 밑에 숫자는 마우스의 움직임을 감지하지만, 일정한 시간내에 복수적인 이벤트는 무시하는 함수이다.
한번 마우스를 가로로 가로질러보자
개발자는 사용자가 마우스를 움직이는지 안 움직이는지를 알고 싶어하는것이다. 불필요하게 많은 양의 함수호출은 불필요하다. 그렇기에 개발자는 Throttling 함수를 도입을 하여 이 점의 성능개선을 꿰할 수 있을것이다.
이로써 Debounce와 Throttling에 대해서 간단하게 알아보는 글이 끝났다.
이 두 개념들을 가지고 http request를 보내는 input에 과도한 request가 보내지는 것을 방지할 수도 있고, 사용자의 불필요한 버튼 클릭 동작을 막을 수도 있다. 위의 예시는 실제 개발할 때 쓰이는 예시인지는 모르겠지만, 개발하다보면 분명 좋은 갖가지 경우들이 있을 것이다.
