Rendering · 하이브리드

메인 스레드 렌더링 예산 설계

메인 스레드 렌더링 예산 설계 상세 커버

Scheduler API, requestIdleCallback 대체 패턴, React concurrent 기능을 비교합니다. 애니메이션과 데이터 페치가 겹칠 때의 우선순위를 정합니다.

모듈 구성

  • 프레임 프로파일링 체크리스트
  • 긴 작업 분할 유틸 코드
  • 애니메이션 타임라인 디버깅
  • 가상 스크롤 비용 비교표
  • 라이브 프로파일링 코칭

수료 후 행동

  • 렌더링 병목을 작업 단위로 분해한다
  • 프레임 드랍 로그를 재현 가능한 시나리오로 만든다
  • 데이터 페치와 렌더 우선순위 표를 작성한다

질문

코호트 메모

“긴 작업 분할 유틸이 실제 장바구니 모듈에 들어갔습니다. 다만 초반 이론 파트가 빠듯해 복습 영상에 의존했습니다.”
케이 · 성능 담당 · B2C 결제 경험 운영팀 · Trustpilot