resize Event와 ResizeObserver 비교해보기 🙌

브라우저의 창 크기가 변화했을 때, 어떤 액션을 발생시키고 싶다면, 가장 먼저 떠올릴 코드는 다음과 같을 것이다.

window.addEventListener('resize', () => {
  console.log('Window resized!');
});

 

바로 resize Event이다.

위의 코드는 브라우저 창 사이즈 크기를 탐지한다.

다만, 특정 DOM의 사이즈 변화는 탐지하지 않기에 개별 Element 사이즈 변화에 대응하지는 않는다.

 

때문에, 새로운 방법이 등장했는데 그것이 바로 ResizeObserver이다.

ResizeObserver는 특정 Element의 크기 변화를 감지할 수 있다.

따라서, 브라우저 창 크기 변화뿐만 아니라 특정 요소의 자체 크기가 변화할 때에도 어떠한 액션이 실행되도록 설정할 수 있다. (CSS 수정 혹은 새로운 아이템 추가 등으로 인한 사이즈 변경 탐지 가능)

const ro = new ResizeObserver((entries) => {
  for (let entry of entries) {
    console.log('Element resized:', entry.target);
  }
});
ro.observe(document.querySelector('.my-element'));

 

따라서, ResizeObserver쪽이 더 정교하게 시점을 컨트롤할 수 있다.

 

다만, 하나 더 고려해야할 점이 있는데 실행 성능이다.

 

Resize Event는 창의 크기가 변경될 때 마다 실행된다.

그렇기 때문에, 사용자가 창 크기를 줄이는 액션중에 계속해서 내부의 로직이 호출되는 문제가 있다.

따라서, 핸들러 내부에서 무겁고 복잡한 로직이 실행되는 걸 지양해야 한다.

 

위의 문제를 해결하기 위해서 디바운스(debounce) 나 스로틀링(throttling)과 같은 기법을 고려해야 한다.

 

반면 ✨ ResizeObserver는 브라우저가 배치 단계 이후에 크기 변화를 감지하고 일괄적으로 콜백을 한 실행시킨다.

때문에 resize처럼 중간에 연속적으로 로직이 호출되지 않는다는 의미이다. (불필요한 연산이 줄어)

결과적으로 중간 연산이 없기에 최종적으로 크기가 변경되었을 경우에만 로직이 호출되도록 할 수 있다.

 

🎶 성능상의 이점은 ResizeObserver를 사용하는 쪽이 더 크다.

 

❗ 다만, resize Event가 훨씬 더 오래된 기능이기에, 지원하는 브라우저 버전이 더 넓다.

 

👻 참고자료

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

ResizeObserver - Web APIs | MDN