두 개념의 정의 차이만 외웠는지, 아니면 어떤 속성 변경이 reflow를 트리거하고 어떤 게 repaint로 끝나는지를 알고 최적화 선택 기준까지 풀어내는지를 가르는 질문이다.
reflow는 width·height·DOM 구조처럼 레이아웃에 영향을 주는 변경이 생겼을 때 브라우저가 요소의 위치와 크기를 다시 계산하는 단계다. 자식 요소와 위로 올라가는 부모 요소까지 같이 다시 계산하기 때문에 비용이 크고, 자주 트리거되면 프레임이 깨진다. repaint는 레이아웃은 그대로 두고 색상·배경 같은 그리기 영역만 다시 칠하는 단계라 reflow보다 가볍지만, 면적이 크거나 빈도가 높으면 여전히 성능을 갉아먹는다. 그래서 같은 효과라도 레이아웃을 건드리지 않는 속성(transform·opacity)으로 가는 게 핵심 선택 기준이 된다.
스크롤·드래그 애니메이션이 끊겨서 transform·opacity로 바꿔본 경험이 있다면 reflow 회피의 구체적 근거로 연결된다
DevTools Performance 탭에서 Layout 막대가 길어진 걸 잡아본 적이 있다면 reflow 트리거 식별로 풀 수 있다
will-change를 남발해서 GPU 메모리 문제를 본 경험이 있다면 최적화 부작용 관점으로 확장할 수 있다
리스트·테이블 리렌더에서 레이아웃 thrashing을 겪어본 적이 있다면 reflow 비용의 누적 효과를 설명할 수 있다
아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.