브라우저 최적화 -Reflow, Repaint

브라우저 원리

1. HTML parsing → Dom 생성
2. CSS parsing → CSSOM 생성
3. DOM + CSSOM → render tree 셍성
4. layout → 위치와 크기를 계산한다
5. paint → 화면상에 실제 픽셀로 변환하여 레이어를 만든다, 색 채워넣기
6. composite → 레이어를 합성하여 실제 화면에 나타낸다.

Reflow, Repaint

layout 과정과 paint과정이 자주 일어나게 되면 웹성능이 저하된다. layout과 print 과정을 피하는 방법에 대해 알아보자.

Reflow

정의
기존의 엘리멘트의 크기나 위치가 변경되는 경우 DOM 과정부터 모든과정을 다시 계산하는 과정

• 성능을 가장 떨어트리게 되는 부분이며 성능최적화가 가장 많이 일어나는 곳이다.
• width, height, font-size 등이 이에 해당되며 콘텐츠의 크기가 변경 될 수 있는 요에서 일반적으로 일어난다.

Repaint

정의

• 색이 변경 되는 경우에 해당 하며 Layout 과정을 생략하게 된다.
• background, border-style, box-shadow, color 등이 변경 되었을 때 Repaint 현상이 일어난다.

layout, paint 피하기

정의
layout과 paint 과정을 피하는 css property를 사용한다.
일반 적으로 transform, opacity가 해당된다.
엘리먼트들을 움직여야 하는 경우 animation과 transform을 많이 고려하게 되는데 일반적인 경우 transform을 이용하는 것이좋다.
transform의 경우 gpu 파워를 사용하고 실제 이동할 때 다른엘리먼트 요소에 피해가 가지않게 이동이 되기 때문에 reflow와 repaint 과정이 다시 일어나지 않는다.

• 성능 최적화에 많이 쓰인다. 쟁크현상이 발생 했을 때 사용하면 CPU 파워뿐만 아니라 GPU 파워를 사용하기 때문에 버벅이는 현상을 해결 할 수 있다.
• opacity와 transform이 이에 해당 된다.

쟁크현상은 미세하게 엘리먼트가 떨리는 현상이 발생하는데 성능이슈로 인해 발생하는 현상이다

reference

https://csstriggers.com/
웹성능 최적화 by 유동균

애니메이션 관찰방법

쟁크현상은 사실 세심하게 보지 않으면 관찰하기가 어려운 경우가 많다. performance 탭을 이용해서 cpu의 속도를 떨어뜨려 관찰해보면 좀 더 쉽게 발견 할 수 있다.

1. performance tab
2. cpu 6x slowdown 설정