Skip to main content

브라우저 html을 그리기

브라우저 html을 그리는 과정​

1. 파싱​

  • html 파일을 DOM으로 파싱
  • <link>, <img> 와 같은 태그를 만나면 리소스를 다운로드
  • <script> 태그를 만나면 DOM 파싱을 중단하고 자바스크립트를 해석

2. 스타일 계산​

  • CSS 파싱 -> CSSOM 변환 / 정보 추출 -> DOM노드 스타일 결정

3. 레이아웃​

  • DOM과 CSSOM정보로 렌더 트리 생성
  • 화면에 표현되는 정보만 렌더 트리에 담는다.(display:none은 담지 않는다.)
info

**렌더 트리(Rander Tree)**란?
브라우저가 html을 분석하여 트리 형태의 구조로 재해석한 것

4. 페인트​

  • 렌더 트리가 생성되면 페인트 기록이 생성된다.
  • 페인트 기록에는 요소가 렌더링하는 순서가 저장
  • 렌더 트리에 모인 데이터를 이용하여 각 레이어를 나누고 시각적 부분을 그리는 작업 진행

5. 컴포지팅​

  • 각각의 레이어를 스크린에 픽셀로 표현(레스터링), 나누었던 레이어들을 합성하여 페이지를 그림.

reflow와 repaint​

reflow​

  • 레이아웃(너비, 높이) 변경 시 영향 받는 모든 노드의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업

repaint​

  • reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업
  • 수치와 상관없이 스타일 변경시 reflow 과정을 생략 후 repaint작업만 수행
note

reflow vs repaint

  • 브라우저 html 구조상의 변화 혹은 스타일의 변화가 있을 때, reflow, repaint과정을 거친다.
  • 렌더링 과정들에서 전 단계의 데이터가 필요