[WPO] 브라우저 렌더링 과정 : Critical Rendering Path, Reflow, Repaint

렌더링 최적화를 위해서 알아야할 개념! 

💡 Critical Rendering Path ( = Pixel Pipeline )

Critical Rendering Path (= Pixel Pipeline, = 브라우저 렌더링 과정)은 크게 4가지 프로세스로 진행된다.

1. DOM + CSSOM
   • DOM : 요소들 간의 관계
   • CSSOM : Style 요소들
2. Render Tree
   • DOM + CSSOM의 조합
3. Layout
   • 요소의 위치와 크기 정보를 가지고 레이아웃을 잡음
4. Paint
   • Layout에 색을 칠해 넣음
5. Composite
   • 각 Layer들을 합성하는 과정

 

---

🌱 Reflow

- Critical Rendering Path 과정이 다시 모두 재실행되는 것

 

🌱 Repaint

- color, background-color가 변경되었을 때, Critical Rendering Path 과정에서 Layout 을 생략하는 것

- Reflow 보다 빠름

 

🌱 GPU의 도움을 받아서 Reflow, Repaint 과정을 모두 피하기

- transform, opacity같은 GPU가 관여할 수 있는 속성이 변경되었을 때, Layout, Paint 과정을 생략

- Reflow, Repaint 보다 빠름

 

 

 

📌 GPU의 도움을 받아서 Reflow, Repaint 과정을 피해 최적화 시키는 방법에 대한 포스팅

https://yexjinitlog.tistory.com/147

[WPO] transform을 이용한 애니메이션 최적화

...updating

 

 

 

 

---

Reference

Inflearn : 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React)