search

CodeSoom / ConStu

네? 뭐라고요??🙋‍♂️ 스터디를 찾고 있다구요?🤔 스터디에 관한 정보는 모두 여기에!!
https://sweet-1cfff.firebaseapp.com
MIT License
30 stars 3 forks source link

[ToDo] 메인 페이지의 스터디 목록을 Intersection Observer로 무한 스크롤을 구현하자 #185

Open saseungmin opened 3 years ago

saseungmin commented 3 years ago

🎈 Scroll Event가 아닌 Intersection Observer?

  1. Intersection Observer를 사용하면 호출 수 제한 방법 debounce, throttle을 사용하지 않아도 된다.
// 스크롤 함수 호출 지옥..
window.addEventListener('scroll', function() {
   return console.log('scroll!');
});
  1. Intersection Observer에서는 reflow를 하지 않는다. Scroll Event에서는 현재의 높이 값을 알기 위해 offsetTop을 사용하는데 정확한 값을 가져오기 위해 매번 layout을 새로 그리게 된다. layout을 새로 그린다는 건 렌더 트리를 재생성한다는 것. 때문에 reflow 과정을 반복하면 브라우저의 성능이 저하와 화면의 버벅거림이 생김.

🎈 참고할만한 것들