요약
웹 브라우저는 HTML 문서를 받아 파싱하여 DOM 트리를 생성하고,
CSS를 파싱해 스타일 정보와 결합된 렌더 트리를 형성합니다.
이후 레이아웃 단계를 거쳐 각 요소의 위치와 크기를 결정하고,
페인팅 단계에서 화면에 그림을 그립니다.
마지막으로 합성 단계를 통해 최종 화면을 생성합니다.
- 변환: 브라우저가 HTML의 원시 바이트를 읽어와서, 파일에 지정된 인코딩(UTF-8)에 따라 개별 문자로 변환
- tokenize: 브라우저가 문자열을 고유 토큰으로 변환(토큰에 따라 의미, 규칙이 있음)
- lexing: 토큰은 속성, 규칙을 정의하는 객체로 변환
- DOM 생성: HTML 마크업이 여러 태그 간의 관계를 정의하기 때문에 생성된 객체는 트리 데이터 구조 내에 연결
이 전체 프로세스의 최종 출력이 바로 이 간단한 페이지의 DOM(Document Object Model)이며, 브라우저는 이후 모든 페이지 처리에 이 DOM을 사용한다.
DOM , SCCOM
1. 문서 파싱(Parsing):
브라우저는 서버로부터 HTML 문서를 받습니다. 이 문서는 파싱되어 DOM(Document Object Model) 트리로 변환됩니다.
DOM은 문서의 구조를 나타내며, 각 요소와 요소 간의 관계를 표현합니다.
2. 스타일 처리(CSS Parsing and Styling):
HTML 파싱 중에 브라우저는 CSS 스타일 시트를 다운로드하고 파싱합니다.
이 스타일 정보는 DOM 트리와 결합되어 렌더 트리(Render Tree)를 형성합니다.
렌더 트리는 화면에 실제로 표시될 요소들을 나타냅니다. 스타일 정보는 각 요소에 적용되며, 각 요소의 위치와 크기를 계산합니다.
3. 자바스크립트 (javascript):
html 중간에 스크립트가 있다면 html 파싱이 중단됩니다
4. 레이아웃(Layout):
렌더 트리를 기반으로 각 요소의 위치와 크기를 계산합니다. 이 과정을 리플로우(Reflow) 또는 레이아웃(Layout)이라고 합니다.
브라우저는 레이아웃 단계에서 요소의 크기, 위치, 가시성 등을 결정하고 렌더링에 대한 최적의 배치를 계산합니다.
5. 페인팅(Painting):
브라우저는 렌더 트리와 레이아웃 정보를 기반으로 화면에 실제로 그려야 할 내용을 결정합니다.
이 과정에서 각 요소의 그래픽 표현이 생성되고, 화면에 렌더링됩니다.
합성(Composition):
브라우저는 화면에 그려진 요소들을 합성하여 최종 화면을 생성합니다.
이 과정은 GPU(Graphics Processing Unit)에서 수행되며, 애니메이션 및 변환 효과와 같은 그래픽 기능을 향상시킵니다.
- Parse HTML (HTML 파싱): 브라우저는 서버로부터 HTML 문서를 받아 이를 파싱하여 - DOM(Document Object Model) 트리를 생성합니다.
- Receive Response (응답 수신): 서버로부터의 응답을 받는 단계입니다.
- Parse Stylesheet (CSS 파싱): HTML과 함께 받거나 참조된 CSS 파일을 파싱하여 - CSSOM(CSS Object Model)을 생성합니다.
- Finish Loading (로딩 완료): 관련 리소스의 로딩이 완료된 시점입니다.
- Evaluate Script (스크립트 평가): 자바스크립트 코드를 실행합니다.
- Function Call (함수 호출): 자바스크립트 함수 호출이 발생합니다.
- Major GC (주요 가비지 컬렉션): 가비지 컬렉션이 발생하여 메모리를 정리합니다.
- Event: load (로드 이벤트): 페이지의 로드가 완료되었음을 나타내는 이벤트가 발생합니다.
- Recalculate Style (스타일 재계산): DOM과 CSSOM을 바탕으로 렌더 트리를 생성하고, 각 요소의 최종 스타일을 계산합니다.
- Layout (레이아웃): 각 요소의 정확한 위치와 크기를 계산합니다.
- firstLayout (첫 레이아웃): 첫 레이아웃 계산이 일어납니다.
- Update Layer Tree (레이어 트리 업데이트): 페이지의 레이어 정보를 업데이트합니다.
- Paint (페인팅): 최종적으로 계산된 레이아웃을 바탕으로 화면에 요소를 그립니다
