브라우저 렌더링 과정 or 원리

 

 

 

웹 브라우저의 렌더링 과정은,

사용자에게 웹 페이지를 시각적으로 표시하기 위해 HTML, CSS, JavaScript와 같은 웹 리소스를 처리하고,

최종적으로 화면에 페이지를 그리는 일련의 단계를 포함한다

 

1. 문서 로딩

• HTML 파싱
  • 브라우저는 웹 서버로부터 HTML 문서를 받아와서 파싱한다
  • 이 과정에서 브라우저는 HTML 문서를 DOM(Document Object Model) 트리로 변환한다
• CSS 파싱
  • HTML 내부나 외부에 포함된 CSS는 CSSOM(CSS Object Model) 트리를 생성하기 위해 파싱된다
• JavaScript 처리
  • HTML 문서 내에서 <script> 태그를 통해 참조된 JavaScript 파일이 로드되고 실행된다
  • JavaScript는 DOM API를 통해 DOM을 조작할 수 있으며, 이는 DOM 트리의 변화를 일으킬 수 있다

2. 렌더 트리 생성

• 렌더 트리 구성
  • DOM 트리와 CSSOM 트리는 결합되어 렌더 트리(Render Tree)를 형성
  • 렌더 트리는 실제로 화면에 그려질 요소들과 그 스타일 정보를 포함
  • 화면에 보이지 않는 요소(display: none; 등)는 렌더 트리에 포함되지 않음

3. 레이아웃 배치(Layout)

• 레이아웃 계산
  • 렌더 트리가 생성되면, 각 노드의 정확한 위치와 크기를 계산하는 레이아웃(Reflow) 과정이 수행된다
  • 이 단계에서는 각 요소의 위치와 크기를 화면의 정확한 픽셀 단위로 계산한다

4. 페인팅(Paint)

• 페인팅
  • 레이아웃 계산 후, 실제로 요소를 화면에 그리는 페인팅 과정이 이루어진다
  • 이 단계에서는 텍스트 색상, 배경, 이미지 등이 화면에 그려진다

5. 합성(Composite)

• 레이어 합성
  • 페이지의 일부 요소는 별도의 레이어로 처리되고, 최종적으로 이러한 레이어들이 합성되어 최종 화면을 형성
  • 이 과정은 페이지의 복잡한 애니메이션과 전환을 더 부드럽게 처리하기 위해 사용됨

 

최적화

브라우저 렌더링 과정은 최적화를 통해 성능을 향상시킬 수 있다

예를 들어, DOM 조작을 최소화하고, CSS 변화가 레이아웃 변경을 일으키지 않도록 주의하며,

필요하지 않은 자바스크립트 로드를 지연시키는 것이 좋다

또한, CSS와 자바스크립트의 최소화(minification) 및 압축, 이미지 최적화 등을 통해 로딩 시간을 줄일 수 있다