reflow vs repaint(redraw)

• Reflow

생성된 DOM 노드의 레이아웃 속성 (너비, 높이, 위치) 등 변경 시,

영향 받은 모든 노드의 (자신, 자식, 부모, 조상) 수치를 다시 계산(recalculate)하여, 렌더 트리를 재생성하는 과정이며,

또한, reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리게 되는데 이 과정을 repaint 라고한다.

• reflow/repaint 가 발생하는 순서

1. 클릭 이벤트 핸들러 실행
2. 변경된 스타일 수치 계산 실행 (recalculate)
3. Layout (Reflow 과정 수행)
4. Paint (Repaint 과정 수행)

• reflow가 일어나는 속성들은 다음과 같다.

position
width
height
left
top
right
bottom
margin
padding
border
border-width
clear
display
float
font-family
font-size
font-weight
line-height
min-height
overflow
text-align
vertical-align
white-space  

출처:[https://boxfoxs.tistory.com/408](https://boxfoxs.tistory.com/408)\[박스여우 - BoxFox\]

• Repaint

위에 나열된 css들의 변경이 항상 relfow를 발생시키는 것은 아니다.
background-color, visibility, outline 등의 css 변경은 레이아웃 수치가 계산되지 않아서 reflow 과정이 생략된 repaint 과정만 일어나게 된다.

• 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
    visibility
  
    출처: [https://boxfoxs.tistory.com/408](https://boxfoxs.tistory.com/408) \[박스여우 - BoxFox\]