대규모 타임라인에서도 부드럽게 동작하는 에디터 만들기
이진 탐색 기반 시간 인덱스와 rAF 기반 Signal 구독으로 Region 조회와 Canvas 갱신 경로를 분리하고, 측정 결과의 한계까지 설명합니다.
Tag
#performance
Published writing tagged with performance.
이진 탐색 기반 Region 시간 인덱스와 rAF Signal 구현하기
Viewport 내 Region만 조회하는 시간 인덱스와 React 실행에서 Canvas draw를 분리하는 rAF 기반 Signal 구독 패턴을 단계별로 구현합니다.
상태 관리 도구 선택 기준과 Store 분리의 중요성
React Context 리렌더 문제를 기준으로 상태 관리 도구 선택과 Store 분리 기준을 정리합니다.
[Part 3.] 오버레이 방식으로 드래그 리렌더 제거하기
타임라인 리전 드래그 중 Canvas 리렌더를 피하기 위해 overlay 기반 이동 구조로 바꾼 과정을 정리합니다.
[Part 2.] 회고록: 정말 최선이었을까?
타임라인 드래그 성능 개선 과정을 다시 검토하며 측정, 병목 분리, 재측정의 중요성을 정리합니다.
[Part 1.] React 경로를 줄이고 한 프레임에 한 번만 그리기
타임라인 드래그 중 React commit과 Canvas draw 비용을 측정하고 rAF 기반 처리로 줄인 과정을 정리합니다.
[Part 3.] Web Worker를 UI 응답성 기준으로 다시 검증하기
전체 생성 시간이 아니라 UI 루프 지연을 비교해 Web Worker를 유지할 근거와 아직 남은 불확실성을 정리합니다.
[Part 2.] 화면에 필요한 썸네일부터 생성하기
영상 길이 기준의 일괄 생성을 poster, visible tile, background prefetch로 나눈 이유와 요청 관리 규칙을 정리합니다.
[Part 1.] 첫 화면과 전체 썸네일을 따로 최적화하기
첫 화면은 HTMLVideoElement seek로 빠르게 채우고, 나머지는 Web Worker에서 생성하도록 나눈 과정을 정리합니다.
rAF로 오디오 에디터 줌 기능 버벅거림 잡기
오디오 에디터 줌 핸들 드래그가 버벅이던 문제를 rAF 기반 업데이트 분리로 줄인 과정을 정리합니다.