*Reflow와 Repaint, Composition는 웹 브라우저에서 발생하는 렌더링 프로세스의 단계를 나타내는 용어입니다.*

Reflow(Reflowing or Layout)

• *Reflow는 HTML 요소의 크기, 위치, 레이아웃이 변경될 때, 이를 계산하고 배치하는 과정을 의미합니다. 즉, 요소의 위치와 크기를 계산하여 화면에 배치하는 단계입니다.*
• *Reflow는 웹 페이지의 구조나 스타일이 변경될 때 발생하며, 해당 변경 사항이 다른 요소들에 영향을 미칠 수 있기 때문에 비용(리소스)이 큰 작업입니다.*

<aside> 💡 *Reflow의 스타일 속성 영향도

position / width / height / left / top / right / bottom / margin / padding / border / border-width / display / float / font-family / font-size / font-weight / line-height / min-height / overflow / text-align / vertical-align / … → 위 속성 변경 시 Reflow 발생*

</aside>

Repaint

• *Repaint는 요소의 색상, 배경, 텍스트 스타일 변경으로 인해 화면을 다시 그리는 과정을 의미합니다. 즉, 요소의 시각적 속성을 다시 그리는 단계입니다.*
• *Repaint는 Reflow와 달리 레이아웃 계산이 필요하지 않으며, 비교적 가벼운 작업입니다.*
• *Repaint는 브라우저가 화면을 업데이트하여 변경된 스타일을 반영하는 과정이며, 이는 사용자에게 시각적으로 변경된 내용을 보여주는 역할을 합니다.*

<aside> 💡

*Repaint의 스타일 속성 영향도

background / background-image / background-position / background-repeat / background-size / border-radius / border-style / box-shadow / color / line-style / outline / outline-color / outline-style / outline-width / text-decoration / … → 위 속성 변경 시 Repaint 발생*

</aside>

Composition

• *Composition는 다른 레이어의 픽셀 데이터를 결합하여 최종 화면을 생성합니다. 이 단계에서는 화면에 표시될 각 요소의 픽셀 데이터를 합성하여 최종 이미지를 구성합니다.*
• 합성 단계에서는 레이어의 투명도, 변환 효과, 블렌딩 모드 등을 고려하여 요소를 조합합니다.
• 브라우저는 합성 작업을 하드웨어 가속을 통해 처리하기도 합니다. (하드웨어 GPU 가속)

<aside> 💡 *Composition의 스타일 속성 영향도

transform / opacity → 위 속성 변경 시 Composition 발생*

</aside>