이전에 브라우저에 대해 알아보았으니 브라우저 렌더링 과정을 알아보자.
먼저 렌더링 과정에서 가장 먼저 이루어지는 HTML 파싱과 DOM 트리 구축 과정을 다뤄본다.
렌더링 엔진
렌더링 엔진은 HTML, CSS, JS, 이미지 등 웹페이지에 포함된 모든 요소들을 화면에 보여준다.
업데이트가 필요할 때(사용자 입력 발생, 스크롤 발생, 애니메이션 동작, 비동기 요청으로 인한 데이터 로딩), 효율적으로 렌더링을 할 수 있도록 트리를 생성한다.
Pasring
브라우저는 HTML, CSS 등 단순한 텍스트 문서를 이해하지 못하기 때문에 브라우저가 이해할 수 있는 구조로 변환해주는 과정이 필요하다. 이를 파싱(Parsing)이라 한다.
파싱의 종류
어휘분석
문자열을 의미 있는 작은 단위인 토큰(token)으로 분해하는 과정이다.브라우저의 렉싱 과정을 통해 토큰이 해당 속성과 규칙을 정의하는 노드 객체로 변환된다.
구문분석
문자열의 문법에 따라 토큰 간의 위계관계를 분석하여 parsing트리를 생성하는 과정
DOM Tree
문서 객체 모델(Document Object Model)의 줄임말로, HTML 을 브라우저가 이해할 수 있는 트리 구조로 변환한 것으로 브라우저에 기본적으로 내장되어 있는 API 중 하나이다.
DOM 트리 내 하나의 객체를 노드라 하며, 총 4자기 노드로 구성되어 있다.
노드란?
웹 페이지를 구성하는 모든 HTML 태그와 텍스트, 그리고 속성 등을 하나의 블록으로 취급하는 것으로 서로 계층 구조로 연결되어 있다. 각 블록들은 자식, 부모, 형제 노드 관계를 가지고 이러한 관계를 이용해 DOM 트리를 탐색하고 조작할 수 있다.
문서 노드 (Document Node)
트리의 최상위 객체. DOM 트리에 접근하기 위한 시작점
요소 노드(Element Node)
HTML 요소 (태그) 를 객체로 표현한 것
어트리뷰트 노드(Attribute Node)
HTML 요소의 'Attribute'를 객체로 표현한 것
텍스트 노드(Text Node)
HTML 요소의 '텍스트'를 객체로 표현한 것
CSSOM(CSS Object Model)
DOM이 어떻게 화면에 표시될 지를 알려주는 역할을 한다. 위에서 아래로 스타일 규칙이 정해지므로 트리 구조를 가진다.
DOM, CSSOM 생성
HTML을 파싱하여 DOM 노드를 만든다. 이 DOM 노드들을 병합하여 DOM 트리를 만든다.
CSS를 파싱하여, CSSOM(CSS Object Model) 트리를 만들게 된다.
렌더트리
브라우저에서 실제로 렌더링되는(모든 노드의 컨텐츠, 스타일 정보 포함) 최종 문서 모델을 나타내는 객체의 계층 구조이다.
document 객체부터 각 노드를 순환하면서 각각의 규칙에 맞는 css를 적용한다. 그러면서 렌더와 관련된 요소들을 렌더 트리에 포함시킨다.
이때 meta 태그나 display:none 같은 요소는 렌더와 관련없으므로 포함시키지 않는다.
웹 브라우저별 렌더링 엔진 종류
1) 웹킷
웹킷(+Blink)의 렌더링 프로세스 과정
2) 게코
게코의 렌더링 프로세스 과정
