browser

브라우저 렌더

1. 브라우저는 HTML, CSS파일을 받아 파싱하여 DOM, CSSOM을 생성한다.
2. 생성된 DOM과 CSSOM을 기준으로 렌더트리를 생성하고,
3. 요소의 크기를 계산하고 배치한다. (레이아웃 단계)
4. 그 후, 요소들에 색상과 같은 스타일을 입히고 (페인트 단계)
5. 레이아웃을 합성하여 렌더를 마친다.

화면이 그려진 후 변화가 생기면 브라우저는 변화 형태에 따라 리플로우 또는 리페인트 과정을 실행한다.

리플로우와 리페인트

리플로우
리플로우는 width, height, display, position, padding 등과 같이 크기와 위치를 다시 계산해야하는 경우에 실행된다. 위에서 설명한 렌더 5단계를 모두 거친다.

리페인트
리페인트는 background, color 등과 같이 색상 관련 속성이 바꼈을 때 실행된다. 레이아웃 단계가 생략된다.

리플로우와 리페인트는 브라우저의 리소스를 잡아 먹는다.
때문에 애니메이션을 적용하면 쟁크 현상이 발생할 수도 있다.

쟁크현상과 최적화

쟁크
브라우저는 60FPS로 화면을 그리는데, 과도한 작업으로 60FPS를 맞추지 못하면 뚝뚝 끊겨서 보이는 것 같은 현상을 느낄 수 있다. 이를 쟁크 현상이라고 한다.

이를 해결하기 위한 방법은 변화가 생겼을 때 레이아웃을 별도로 생성해 CPU 대신 GPU가 처리하도록 위임하는 속성을 사용하는 것이다.
transform, opacity와 같은 속성을 사용하면 훨씬 빠르게 작업이 끝나는 것을 확인할 수 있다.

---

Reference

프론트엔드 성능 최적화 가이드