*Reflow
와 Repaint
, Composition
는 웹 브라우저에서 발생하는 렌더링 프로세스의 단계를 나타내는 용어입니다.*
*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
는 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
는 다른 레이어의 픽셀 데이터를 결합하여 최종 화면을 생성합니다. 이 단계에서는 화면에 표시될 각 요소의 픽셀 데이터를 합성하여 최종 이미지를 구성합니다.*<aside> 💡 *Composition의 스타일 속성 영향도
transform / opacity → 위 속성 변경 시 Composition 발생*
</aside>