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

Reflow(Reflowing or Layout)

<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

<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>