Intersection Observer가 scroll event handler에 비해서 성능이 좋다.
실험
Intersection Observer로 구현한 infinite scrolling list와 scroll event handler로 구현한 infinite scrolling list를 비교하였다.
scroll event handler에는 throttling과 caching이 적용되어 있다.
실험 결과
Scroll event handler에서 frame drop 현상이 크게 나타났다. 노란색, 빨간색 영역이 컸다.
CPU를 6배로 느리게 하고 실행한 결과, frame drop 현상이 실험 중 체감이 될 정도로 크게 느껴졌다. 스크롤링으로 페이지의 다른 부분으로 이동했을 때 screen을 paint하는데 3초 이상 소요되는 경우가 있었다.
core web vitals에서 interaction to next paint는 200ms 이하를 권장하고 있기에 이는 안 좋은 UX를 초래할 수 있다.
원인 분석
Intersection Observer 경우는 element간 교차가 발생할 경우만 비동기로 실행되어 main thread를 blocking하지 않지만, scroll event handler의 경우 스크롤 event가 발생할 때마다 main thread를 blocking한다.
throttling을 하더라도 element가 교차하지 않는 시점에 event handler가 호출되고, caching을 시키더라도 cache된 값을 가져오는function call은 여전히 발생하는 것이 원인으로 보인다.
결과
공수 비교: scroll event handler 구현은 caching과 throttling에서 복잡하게 구현하게 되므로 Intersection Observer보다 공수가 크다.
쓸데없는 main thread blocking 유무: caching과 throttling을 구현하더라도, main thread blocking 빈도는 본질적으로 scroll event handler가 훨씬 더 많을 수밖에 없어 극한의 디바이스 환경에서는 frame drop을 겪을 수도 있다. 반면 Intersection Observer는 소모적은 main thread blocking이 발생하지 않는다.
픽셀 단위 customization: scroll event에서 요소의 정확한 픽셀 단위를 파악할 수는 있겠다.
따라서 요소의 픽셀 단위 절대 위치가 필요한 게 아니라면 IntersectionObserver를 쓰는게 사용자 경험에 좋다.
https://itnext.io/1v1-scroll-listener-vs-intersection-observers-469a26ab9eb6
https://blog.hyeyoonjung.com/2019/01/09/intersectionobserver-tutorial/
Medium
Top comments (0)