수정된 render tree를 다시 렌더링 과정에서 발생하는 것.
HTML문서의 전체 또는 일부 영역의 스타일이 변경되었을 때 브라우저가 변경된 스타일을 다시 적용하는 작업
속성명 | 속성명 |
---|---|
visibility | background |
text-decoration | background-image |
backgroun-position | background-repeat |
outline-color | outline |
outline-style | border-radius |
outline-width | box-shadow |
background-size |
HTML문서를 구성하는 요소의 크기나 위치가 변경되었을 떄 각각의 요소를 재배치하는 작업
속성명 | 속성명 |
---|---|
padding | margin |
display | border-width |
border | top |
position | font=size |
float | text-align |
overflow-y | font-weight |
overflow | left |
font-family | line-height |
vertical-align | right |
clear | white-space |
bottom | min-height |
많이 일어나는 만큼 rendering이 그만큼 수행되기 때문에 빈번한 repain, reflow 발생은 웹 어플리케이션의 성능을 하락시키는 주된 요인이 된다.
부드러운 애니메이션을 만들기 위해선 브라우저가 처리할 내역이 적어야되고, 그만큼 reflow와 repaint를 최소화 시켜야 한다.
보통 carousel을 실습할 떄 margin
과 translate
속성을 많이 이용한다.
이 두가지 방법 모두 결과는 같지만, 어플리케이션 성능에서 차이가 발생할 수 있다.
위의 테이블에서 언급되었듯이 margin
을 사용할 경우 reflow가 발생하기에 빈번히 margin
값을 변경하는 것은 추천되지 않는다.
가급적이면 translate
를 사용하여 움직이는 개체애 대한 변화값을 지정해주는 것이 좋다.
transalte
같은 속성을 사용할 수 없는 경우라면 아래 2가지를 고려해보자.
위치 이동을 구현한 애니메이션의 경우 reflow가 빈번하게 발생하기에 사용을 지양해야한다. 허나, 사용해야 하는 경우 positon: fixed
, position: absolute
속성을 함께 사용해준다. 해당 요소들을 사용하는 경우, 전체 페이지와 해당 요소가 분리되어 인식되므로, 해당 요소외에는 영향을 받지 않도록 할 수 있다.
will-change
는 변화가 예상되는 오소를 브라우저에게 미리 알려주어, 브라우저가 실제 요소가 변화되기 전에 적절하게 최적화를 할 수 있다.