렌더링 순서(트리 생성, 레이아웃, 페인트)

서버 사이드 렌더링, 클라이언트 사이드 렌더링과 같이 '렌더링'에 대한 이야기는 굉장히 많이 접했으나 정확히 그에 대해 알지는 못했다.

구글 chrome 브라우저에 렌더링에 관한 설명이 잘 정리되어 있어 참고해 보았다.

 

---

// 렌더링

-   웹 브라우저가 HTML, CSS, JavaScript 등을 해석하여 사용자에게 보여지는 페이지로 변환하는 과정

출처: Google for Developers

1. Loading
   - HTML, CSS 파일, 외부 스크립트와 같은 모든 자원들을 받아온다.
   
   
2. Scripting
   1) 서버에서 받아온 HTML을 파싱하여 DOM 트리를 생성한다.
   2) CSS 같은 스타일들을 읽어 CSSOM 트리를 생성한다.
   3) 초기 페이지 로딩 시, 생성된 DOM 트리를 자바스크립트가 동적으로 구성하거나 수정한다.
   
   
3. Rendering
   - DOM 트리와 CSSOM 트리를 결합하여(DOM + CSSOM) 표시될 노드를 결정한 Render Tree를 생성한다.
   - 페이지가 이미 로드된 후, 자바스크립트가 Render Tree를 동적으로 갱신한다.
   
   
4. Layout(Reflow)
   - Render Tree 각 노드들의 크기, 위치 등을 계산한다.
   
   
5. Painting(Repaint)
   - 노드들을 계산된 레이아웃에 따라 사용자에게 보일 화면으로 그려서 나타낸다.

---

- 개발자도구의 Performance를 통해 Rendering 과정을 상세히 확인할 수 있다.

---

이 페이지의 일부는 Google에서 만들고 공유한 저작물을 복제한 것이며 크리에이티브 커먼즈 4.0 저작자 표시 라이선스에 설명된 약관에 따라 사용됩니다.

사이트 주소: https://web.dev/articles/critical-rendering-path/render-tree-construction?hl=ko