[250808] TIL

Today I Learned (2025-08-08)

기술 면접 준비

reflow, repaint

reflow란?

• DOM 요소의 크기나 위치, 레이아웃 구조가 변경되어 브라우저가 레이아웃 단계를 다시 수행하는 과정입니다.
• reflow가 발생하면 이후 단계인 repaint도 함께 일어날 수 있습니다.

repaint란?

• 요소의 위치나 크기는 그대로이지만 화면의 스타일 변경이 발생해, 브라우저가 페인트 단계부터 다시 그려주는 과정을 의미합니다.
• 레이아웃 계산이 필요하지 않으므로 reflow보다 비용이 적습니다.

왜 transform/opacity는 reflow,repaint를 안거칠까?

• conpositing 단계에서는 미리 그려진 레이어를 GPU에서 합성하는데, transform과 opacity는 요소의 레이아웃이나 픽셀 색상을 직접 변경하지 않고, 기존에 그려진 레이어를 GPU에서 변환,합성만 합니다.