긴 웹페이지를 스크롤할 때 모든 이미지가 미리 로드되면 초기 페이지 로딩 속도는 엄청나게 느려진다. 특히 전자상거래 사이트나 SNS처럼 이미지가 수십 개 이상인 페이지라면 사용자가 눈으로 볼 수 없는 아래쪽 이미지까지 다운로드하느라 네트워크와 브라우저 메모리가 낭비된다. 대부분의 개발자는 이미지 최적화의 중요성을 알면서도 단순히 만 쓰고 넘어간다. 이번에는···
웹 서비스에서 데이터를 연속으로 불러오는 무한 스크롤(Infinite Scroll)이나 이미지 지연 로딩(Lazy Loading)을 구현할 때, 스크롤 이벤트를 등록했다가 브라우저가 버벅거리는 현상을 경험해봤을 것이다.다만 스크롤 이벤트가 발생할 때마다 실행되는 콜백 함수가 브라우저 메인 스레드를 얼마나 점유하는지, 그리고 왜 이 문제가 발생하는지 정확한 ···
웹 페이지에서 스크롤에 맞춰 이미지를 늦게 불러오는 지연 로딩(Lazy Loading)이나, 페이지 하단에 도달했을 때 다음 데이터를 자동으로 불러오는 무한 스크롤을 구현해본 적이 있을 것이다.다만 기존의 window.addEventListener('scroll', ...) 방식이 스크롤할 때마다 수십, 수백 번씩 호출되어 브라우저의 렌더링 성능을 심각하게···