요청해서 받아온 HTML CSS 파일들을 파싱하고 렌더링해서 브라우저 화면에 표시해주는 중요한 역할
요청해서 받은 파일을 바탕으로
각 과정이 모두 끝날 때 까지 기다렸다가 다음 과정을 수행하여 한 차례로 렌더링을 끝내는 것 X
네트워크에서 오면 오는대로 렌더링 수행
우리가 아는 코드 → 브라우저가 이해할 수 있는 구조(보통 트리 구조)
작성된 언어나 형식에 따라 문맥 자유 문법(일대일 변환)에 맞추어 파싱함
파싱의 과정은 어휘 분석(토큰)과 구문 분석(구문 규칙, 문법)으로 구분
문서(소스코드) → 어휘 분석(어휘 분석기) → 구문 분석(파서)→ 파싱트리 → 기계코드
하지만 HTML은 문맥 자유 문법이 아니고, 스크립트에 의해 파싱이 수정될 수 있기 때문에 일반적인 파싱을 적용할 수 없어 따로 파서를 생성하여 사용
태그< > 를 기준으로 토큰을 생성하며 오류를 수정하기도 함
문맥 자유 문법이기 때문에 일반적인 파서를 이용하여 파싱 가능
파서가 DOM 트리를 구축하는 동안 완료된 부분에 대해 브라우저는 렌더 트리를 구축
→ 자식 요소를 어떻게 배치하고 그려낼지 정의
이런 렌더 트리의 구성요소 들을 렌더러라고 부름
렌더 객체들은 DOM 노드에 대응하지만 일대일 대응 관계도 아니고 트리 상 위치도 다름
렌더 트리는 문서 구조 뿐만 아니라 시각적인 요소(색, display여부 등)를 포함하여 이용자에게 어떻게 보여질지 나타내는 것
attach
메서드를 호출하여 스타일 결정(동기적 작업)이때 스타일을 결정할 때 규칙 트리라는 것을 이용
앞서 만들어진 렌더 트리에는 크기와 위치 정보가 포함되어 있지 않음
기본적인 HTML 배치는 위→아래, 왼→오
최상위 렌더러의 위치는 (0,0)으로 왼쪽 상단이며 창의 크기, 즉 뷰포트 만큼의 면적을 가짐
이런 렌더러는 최상위 렌더러부터 반복되어 배치되며 배치해야할 자식 렌더러의 배치 메소드를 불러오고 다시 또 불러오고 불러오고….(재귀의 느낌이 있는 것 같음)
배치가 필요한 요소를 더티라고 표시 → 더티 비트라는 것을 이용하여 더티 상태를 표시함
보통 다음과 같이 배치가 진행
배치가 끝난 렌더 트리를 탐색하며 각 렌더러의 paint
메서드를 호출
렌더러들은 스택에 쌓이는 순서대로 그려지기 때문에 뒤→앞으로 그려지게 됨