무한 스크롤
성능 최적화
- 페이징: 데이터를 한 번에 모두 가져오는 대신, 필요한 만큼씩 페이지 단위로 데이터를 요청한다.
- 가상 스크롤: 화면에 보이는 부분만 렌더링하고, 사용자가 스크롤할 때 필요한 데이터만 동적으로 추가 및 제거. 렌더링 속도 최적화.
- 캐싱: 콘텐츠가 자주 업데이트되고, 실시간 상태를 반영해야 하는 경우가 아니라면 캐싱으로 네트워크 트래픽을 줄이고 응답 속도를 높입니다.
성능 최적화
이미지 최적화
Lazy loading
리소스를 필요한 시점에 로드
파일 압축
canvas를 활용하여 이미지를 리사이징할 수 있다.
리소스 낭비를 방지하고, 업로드한 이미지의 로드 속도를 개선할 수 있다.
사이즈 최적화
1-1. 레티나 디스플레이를 고려하여, 2배 사이즈 사용 (품질 향상)
1-2. img 태그의 srcset 속성을 사용하여 기기에 따라 적절한 사이즈의 이미지 제공
(로딩 속도 및 품질 향상)
포맷 최적화
picture 태그를 사용하여 최신 포맷을 지원하고, 예전 브라우저에서도 사용 가능한 포맷 지원 (점진적 향상기법)
(로딩 속도 및 품질 향상)
영상 최적화
사이즈 축소 및 포맷 변경으로 압축
애니메이션 최적화
transform, opacity 사용으로 리플로우, 리페인트 피하기
지연 로딩 (Lazy loading)
초기 로딩 시 모든 리소스를 불러오지 않고, 필요한 시점에 리소스를 로드하는 기술로, 초기 로딩 속도를 향상시킬 수 있다.
코드 스플리팅 (Code Splitting)
코드를 분할하여 필요한 시점에 로드할 수 있게 하는 기술이다.
리액트에선 React.lazy 와 Suspense를 통해 컴포넌트 코드 스플리팅을 구현할 수 있다.
lazy는 해당 경로로 이동했을 때 컴포넌트를 불러오게 하는 메서드
Suspense는 컴포넌트를 불러오는 시간 동안 로딩 화면을 보여주는 컴포넌트
텍스트 압축
HTML, CSS, JavaScript는 텍스트 기반의 파일이기 때문에 텍스트 압축 기법을 적용할 수 있다.
Gzip, Deflate
캐시 최적화
폰트 최적화
상황에 맞게 폰트 적용 시점 제어하기
포맷 변경 및 서브셋 폰트 사용으로 파일 크기 줄이기
레이아웃 쉬프트
데이터를 불러온 후 렌더링하는 요소나 이미지의 사이즈를 지정
쓰로틀링과 디바운싱
짧은 시간 간격으로 연속해서 발생하는 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다.
이를 방지하는 프로그래밍 기법이다.
쓰로틀링
- 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다.
- scroll 이벤트 처리, 무한 스크롤 UI 구현
디바운싱
- 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 마지막에 한 번만 이벤트 핸들러가 호출되도록 한다.
- resize 이벤트 처리, 입력 필드 자동완성 UI 구현, 버튼 중복 클릭 방지 처리
애니메이션 최적화
transform, opacity 사용
