Performace 기존 무한 스크롤을 구현했던 방식은 Scroll Event를 이용하여 현재 스크롤 위치와 전체 스크롤 크기 등을 이용한 로직이었습니다. 해당 로직은 문제점이 있었는데요. 스크롤을 움직이면 1초안에 굉장히 많은 Event가 발생하게 되면서 위 퍼포먼스 성능과 같이 1000ms 당 약 160ms를 스크립트가 차지하게 되는 문제였습니다. 사실 최근 개인 컴퓨터의 성능과 서버의 성능이 많이 좋아지면서 체감하기 어려울 순 있습니다. 하지만 항상 최선만을 염두에 둘 순 없습니다. 만약 성능이 안좋다면 유저에게 최악의 경험을 안겨주게 됩니다. 두 가지의 개선 방법이 있었습니다. 쓰로틀링과 인터섹션 옵저버 입니다. 제가 처음 사용을 고려했던 것은 쓰로틀링 이었는데요. 문제가 있었습니다. 이에 대해 ..
성능 최적화 (2) Infinite scroll 에 Intersection Observer 적용하기
Performace 기존 무한 스크롤을 구현했던 방식은 Scroll Event를 이용하여 현재 스크롤 위치와 전체 스크롤 크기 등을 이용한 로직이었습니다. 해당 로직은 문제점이 있었는데요. 스크롤을 움직이면 1초안에 굉장히 많은 Event가 발생하게 되면서 위 퍼포먼스 성능과 같이 1000ms 당 약 160ms를 스크립트가 차지하게 되는 문제였습니다. 사실 최근 개인 컴퓨터의 성능과 서버의 성능이 많이 좋아지면서 체감하기 어려울 순 있습니다. 하지만 항상 최선만을 염두에 둘 순 없습니다. 만약 성능이 안좋다면 유저에게 최악의 경험을 안겨주게 됩니다. 두 가지의 개선 방법이 있었습니다. 쓰로틀링과 인터섹션 옵저버 입니다. 제가 처음 사용을 고려했던 것은 쓰로틀링 이었는데요. 문제가 있었습니다. 이에 대해 ..
2022.07.19