Rendering Pipeline

• React Rendering Pipeline
  • JS Entry Point
    • index.js
    • main.tsx
  • JSX → React.createElement
  • React Element Tree created
  • Fiber Tree 생성 (Work-In-Progress)
  • React Render Phase
    • 컴포넌트 함수 실행
    • VDOM(Fiber Nodes) 생성
  • Reconciliation
    • Diffing
      • Current Fiber Tree with WIP Fiber Tree
  • Commit Phase
    • DOM Mutation
      • reactDOM이 실제 DOM 수정
      • 이후 브라우저가 렌더링 파이프 수행
        • 브라우저는 변경된 부분에 대해서만 렌더 트리 갱신
        • dom파싱은 reactDOM이 이미 직접 DOM API 호출하고 수행
        • css파싱은 파일이 변경되지 않는한 파싱 재수행 X
    • side effect
    • ref 설정
    • useLayoutEffect 실행
    • 컴포넌트 마운트 / 언마운트 처리
• Browser Rendering Pipeline
  • Parsing
    • HTML → DOM
      • script를 만나면?
        • 실행
          • 내부 스크립트
            • DOM 파싱 중단
          • 외부 스크립트
            • 실행 후 파싱 재개
        • 문제점
          • script로 dom 조작이 가능하여 얘기치 못한 상황 가능
        • 해결
          • <script async>
            • 즉시 실행, 순서 보장 x
          • <script defer>
            • DOM 완성후 실행, 순서 보장
    • CSS → CSSOM
  • Render Tree, Render Layout 구성
    • DOM + CSSOM
    • Graphic 요소는 Graphic Layout으로 따로 구성
    • render tree, render layout은 1:1 대응이 아닐 수 있다
      • display: none 등 최적화된 render layout
  • Layout (Reflow)
    • cpu
    • 일부 gpu 가속
  • Painting (Redraw)
    • cpu
    • 일부 gpu 가속
    • rasterization
      • Layer 1 → Paint into bitmap
      • Layer 2 → Paint into bitmap
      • Layer 3 → Paint into bitmap
  • Compositing
    • gpu 개입
  • Screen Draw