[CS]브라우저 렌더링 과정

1. 파싱(parsing)

• 서버로부터 받은 HTML문서로 Dom tree를 생성
• css 파일로 CSSOM tree을 생성
  • CSSOM : css object model

2. 렌더 트리 생성

• 렌더트리는 위의 Dom tree와 CSSOM tree로 이루어져있다.

3. 레이아웃(Layout)

• 각 요소의 위치와 크기를 계산후 박스 모델이 배치

4. 페인트(paint)

• 레이아웃 단계에선 계산된 것을 기반으로 실제 픽셀로 변환
• 하나의 레이어가 아닌 여러개의 레이어로 구성
• 리플로우(Reflow)
  • 위치와 크기에 영향을 주는 속성이 있을 시 일어남
  • 렌더링 트리 생성과 레이아웃 과정을 다시 수행
  • position, width, height 등
• 리페인트(Repaint)
  • 변화가 일어났을 때 다시 그리는 작업
  • 렌더링 트리에 영향을 주지 않는 속성은 리페인트(Repaint)작업만 일어남
  • background, color, border-radius 등
• 이때 GPU가 사용됨

5. 합성(composting)

• 여러 개의 복잡한 작업들을 하나로 합침
• 이때 여러개의 레이어로 되어있다면 어떤 순서로 화면에 나타낼지 정하게됨