scroll event 및 intersection obeserver
특정 요소의 가시성을 기반으로 작업을 하게될 때, 주로 scroll event나 intersection observer api를 사용하여 구현하게 된다. 나의 경우에는 처리할 수 없는 상황이 아니고 브라우저에 제한이 없다면 intersection observer api를 활용하는 편이다.
이유는 scroll event로 구현하였을 때, 단시간에 수많은 호출이 동기적으로 발생하여 메인 스레드에 부하를 줄 수 있기 때문에 debounce, throttle 같은 추가작업이 거의 필수로 필요했고 현재 요소의 가시성을 판단하기 위해서 getBoundingClientRect() 메서드 호출이 필요했는데 해당 메서드는 reflow를 발생시키는 메서드로 intersection observer api와 비교하여 성능상 불리하기 때문이다.
getBoundingClientRect() 메서드
뷰포트에 대한 요소의 좌푯값들을 얻어낼 수 있는 메서드로 해당 메서드를 통해 요소가 뷰포트 안에 들어있는지 아닌지 판단할 수 있다.
너무 단점만 이야기 한 것 같은데 그럼에도 불구하고 IE에서는 지원을 안하기도 하고 scroll event로 구현해야만 해결할 수 있는 상황이 있다고 하기 때문에 scroll event방식도 같이 기억해두고 있으면 좋을 것 같다.
Reference
