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