DOM Reflow 100번을 1번으로 줄였더니 60fps가 돌아왔다
DOM Reflow 100번을 1번으로 줄였더니 60fps가 돌아왔다
캔버스 에디터 드래그 성능 저하의 원인을 React가 아닌 Layout Thrashing으로 분석했습니다. Read와 Write를 분리한 4-Phase 배칭으로 reflow를 줄여 60fps를 회복했습니다.
#React#DOM
78005분
새로운 기술 블로그가 추가되었어요
필터 1
새로운 기술 블로그가 추가되었어요
캔버스 에디터 드래그 성능 저하의 원인을 React가 아닌 Layout Thrashing으로 분석했습니다. Read와 Write를 분리한 4-Phase 배칭으로 reflow를 줄여 60fps를 회복했습니다.
여러 플랫폼의 이력서를 한 화면에서 안정적으로 보여주기 위해 Shadow DOM 적용 사례를 다뤘습니다. 스타일 충돌 방지, 스크립트 처리, FOUC 대응과 한계까지 정리했습니다.