1. 웹 브라우저 : 웹페이지 리더기(Rendering 절차)

웹 페이지의 3개 구성 요소 (HTML, CSS, JS) 모두 실행 및 렌더하여, 유저에게 결과 웹 페이지 노출

1. HTML ~= DOM : HTML 는 단지 텍스트, DOM 은 HTML 조작을 위해 제공되는 API (객체)

2. CSS ~= CSSOM : CSS 는 단지 텍스트, CSSOM 은 CSS 조작을 위해 제공되는 API (객체)

3. DOM Tree + CSSOM Tree → Render Tree

   • Render Tree 는 HTML(= DOM Tree) + CSS(= CSSOM Tree) 두 트리의 결합된 최종 결과물이며,
   • 웹 브라우저의 렌더링 엔진의 인풋이고, 우리는 그에 대한 아웃풋으로 크롬에서보는 화면이 되는것

4. Render Tree → Layout (Reflow:뷰포트의 사이즈를 재 결정) → Paint (Repaint:뷰포트의 사이즈가 변경되면 다시 그림)

   • Layout : Viewport 계산 = 쉽게 말하자면, Render Tree 를 그릴 도화지의 크기 계산
   • Paint : (Viewport 계산 후) 실제로 Render Tree 그리기

• Reflow 와 Repaint 는 최초 Render Tree → Layout → Paint 이후에 다시 수행되는 Layout, Paint 의미
  • Reflow는 레이아웃과 관련된 변경(예: 크기, 위치 변경)으로 인해 Layout 단계가 다시 수행되는 과정입니다.
  • Repaint는 레이아웃 변화 없이 단순히 시각적 속성(예: 색상 변경)이 바뀌었을 때 발생합니다.

5. HTML + CSS 가 웹 브라우저에서 유저에게 표기가 완료되면, 이제 JS 를 통해 인터렉션 이벤트 등 적용
   - Time to interactive (TTI) : HTML + CSS 로드 뒤 JS 를 통해 마우스 이벤트 등 비로소 적용됐을때 → 한마디로 사용자가 실제로 상호작용 할수있는 상태에 도달하는데 걸리는 시간

   정리: 웹 브라우저는 웹페이지의 구성요소(HTML, CSS, JS)를 받고 Rendering 하게된다.
   HTML에는 DOM이라는 API객체, CSS에는 CSSOM이라는 API객체 이 두 Tree가 합쳐져 Render Tree가 되며,
   Render Tree는 Layout과정을 거쳐 Paint과정으로 결과가 나와 우리눈에 보여지는 웹페이지가 됨.
   이떄 Layout은 우리가 보는 화면의 크기인 Viewport의 계산을 의미하며, Viewport의 계산이 끝나면 화면을 그리는 과정이 Paint이다.

   추가 참고
   TTI는 웹 성능 최적화의 중요한 지표로, 초기 로딩 시간을 단축하고 사용자 경험을 개선하는 데 사용됩니다.

   Reflow는 성능에 큰 영향을 미칠 수 있기 때문에, 이를 최소화하는 것이 중요합니다. 예를 들어, DOM을 자주 조작하거나 스타일을 변경할 때 발생할 수 있습니다.
   해결 방법으로는 DocumentFragment를 사용하거나, CSS 클래스 토글로 스타일 변경을 한 번에 적용하는 것이 효과적입니다.