브라우저가 어떻게 동작하는지 알아보겠습니다.
브라우저 렌더링 과정
1. 클라이언트에서 불러오고 싶은 파일을 서버에 요청.
- 주소창에 직접 입력 or 클릭을 통해 웹 페이지 접근.
2. 서버에서 받은 HTML 데이터를 파싱.
- 바이트 → 문자 → 토큰 → 노트 → DOM
- 서버는 HTML 파일을 읽고 메모리에 저장한 다음 인터넷을 경유하며 응답.
- meta태그의 charset 어트리뷰터에 의해 바이트 형태의 HTML 문서를 문자열로 변환.
- 토큰들로 분해.
- 각 토큰을 객체로 변환해서 노드 생성. 토큰의 내용에 따라 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드가 생성됨.
3. HMTL 마크업을 바탕으로 DOM트리를 생성.
- HTML요소 간의 부자 관계를 반영하여 트리자료구조로 구성.
4. CSS 마크업을 바탕으로 CSSOM 트리를 생성.
- 바이트 → 문자 → 토큰 → 노드 → CSSOM
5. DOM 트리와 CSSOM트리를 결합하여 렌더 트리를 형성.
6. 렌더 트리에서 레이아웃을 실행.
- 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산.
7. 개별 노드를 화면에 페인팅.
- 렌더링 완료.
⇒ 간단하게 요약
- 클라이언트에 파일을 서버에 요청. 서버에서 HTML, CSS데이터 파싱으로 생성된 DOM, CSSOM을 결합하여 렌더 트리 생성. 그 렌더 트리에서 레이아웃 실행하고 화면에 페인팅.
브라우저가 렌더링하는동안 자바스크립트는 어떻게 동작할까?
1. DOM을 생성해 나가다가 script태그를 만나면 DOM 생성을 중단.
2. 자바스크립트 엔진에 제어권을 넘김.
- script태그에 src 어트리뷰트에 정의된 파일을 서버에 요청하고 로드한 파일 파싱.
3. JS코드를 파싱하여 CPU가 이해할 수 있는 언어로 변환, 해석.
4. AST를 생성하고 그것을 기반으로 바이트코드를 생성하여 실행.
- AST(Abstract Syntax Tree): 추상적 구문 트리.
5. 리플로우 리페인트.
- 만약 JS코드에 DOM을 변경하는 API가 사용된 경우, 변경된 DOM은 다시 렌더 트리를 만들어서 레이아웃을 실행하고 페인팅 함. 이를 리플로우(reflow), 리페인트(repaint)라고 함.
DOM?
- HTML문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API.
- 메서드와 프로퍼티를 제공하는 트리 자료구조.
- HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됨.
DONE !
