브라우저의 렌더링과정

브라우저의 렌더링과정

1. 요청

브라우저 > 서버에 요청 : 서버에 필요한 리소스를 요청


2. 트리 생성


• HTML 파싱 : 웹서버에서 받은 HTML 문서를 파싱하여 DOM트리 생성
• CSS 파싱 : HTML 파싱 후, 외부 CSS 스타일 시트 및 <style> 태그 내의 스타일 정보를 파싱하여 CSSOM트리 생성
• 렌더링 트리 구축 : DOM트리와 CSSOM트리를 결합하여 렌더링 트리(Render Tree)생성,
  렌더링 트리는 실제로 화면에 표시될 요소만을 포함, 레이아웃 정보와 스타일 정보가 포함된다.

즉, 브라우저의 렌더링 엔진이 HTML, CSS를 파싱 > DOM, CSSOM 생성 > DOM 트리 + CSSOM 트리로 렌더링트리를 생성 > 이를 사용해 페이지를 렌더링 한다.

3. Layout(Reflow)

렌더트리를 토대로 그려질 요소의 크기와 위치를 계산
렌더링 트리에서는 위치, 크기등을 알 수 없기 때문에 객체들에게 위치 크기 등을 정해주는 과정
css는 선택자에 따라서 적용되는 태그가 다르기 때문에 모든 css 스타일을 분석해 태그에 스타일 규칙이 적용되게 결정


4. 페인팅(Repaint)

렌더트리의 각 노드를 실제 픽셀로 변환하여 실제로 웹 페이지를 렌더링 한다.

5. 화면 표시

모든 계산과 렌더링 작업이 완료되면 최종적으로 웹 페이지가 사용자에게 표시 된다.


• 리플로우 : 레이아웃 계산을 다시하는 것 (웹 인터랙션으로 인해 위의 렌더링 과정의 레이아웃을 반복해 수행하는 것)
  리플로우(Reflow)가 일어나는 대표적인 속성들
  : position, width, height, margin, padding, border, border-width, font-size, font-weight, line-height, text-align, overflow
• 리페인트 : 재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것
  리페인트(Repaint)만 일어나는 대표적인 속성들
  : background, color, text-decoration, border-style, border-radius

• 기존 요소에 변경 사항이 생겼다고 해서 항상 리플로우(Reflow)-리페인트(Repaint)가 일어나는 것은 아니고, 레이아웃에 영향이 미치지 않는 단순한 색상 변경 같은 변경사항은 리플로우(Reflow) 수행 없이 바로 리페인트(Repaint)만 수행하게 된다. (리플로우가 일어나면 반드시 리페인트가 일어난다.)