Scroll Event?
DOM의 스크롤 이벤트로 ‘현재 스크롤 한 길이’와 ‘전체 페이지 길이’를 비교해서 추가적인 요소를 불러오는 방법
IntersectionObserver
타겟 요소를 정해서 그 요소가 화면에 보이게 되면 추가적인 요소를 불러오는 방법
Scroll Event 단점?
Scroll Event는 전체적인 스크롤에 반응한다. 이는 성능적으로 비효율적이다.
자 그럼 어떤 성능적 비효율이 있나?
스크롤 이벤트에 쓰이는 documentElement.scrollTop과 documentElement.offsetHeight는 reflow를 일으켜서 성능상 좋지 않다.
“reflow”는 모든 엘리먼트의 위치와 길이 등을 다시 계산하는 것으로 문서의 일부 혹은 전체를 다시 렌더링한다.
행동하는 프론트엔드 개발자 되어가는 중 👊 파이팅!!