단계 이름을 외운 수준인지, 어떤 변경이 어느 단계를 다시 돌리는지까지 연결해 보는 사람인지를 가른다.
브라우저는 HTML을 파싱해 DOM을, CSS를 파싱해 CSSOM을 만들고 둘을 결합해 렌더 트리를 구성한다. 이후 레이아웃 단계에서 요소의 위치와 크기를 계산하고, 페인트 단계에서 픽셀을 그리며, 마지막으로 레이어를 합성해 화면에 표시한다. display:none 요소는 렌더 트리에서 제외되고, transform/opacity 같은 속성은 주로 컴포지팅 단계에서 처리되어 레이아웃/페인트를 건너뛴다. 단계별 비용이 달라서 어떤 CSS 변경이 어느 단계를 다시 돌리는지가 성능의 핵심이다.
offsetWidth 읽기와 스타일 변경이 섞여 layout thrashing이 났던 경험이 있다면 어떻게 측정/배치 분리로 풀었는지 연결할 수 있다
top/left 애니메이션을 transform 기반으로 바꿔 프레임을 살린 경험이 있다면 단계별 비용 설명과 함께 말할 수 있다
Performance 탭에서 Long Frame을 들여다본 적이 있다면 어느 단계가 길었는지를 답변 후크로 쓸 수 있다
아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.