웹브라우저 테크놀로지 : 웹브라우저 안쪽 – HTML처리 과정 (1)
웹 엔진이 하는 일
웹 엔진이 주로 하는 일은 웹서버에 저장된 HTML문서를 다운로드 받아 특정 윈도우 영역에 표시하는 것이다. 좀 더 자세히 살펴보면 기본적으로 다음과 같은 작업을 실행한다.
- 불러오기(Loading)
- 파싱(Parsing)
- 자바스크립트 실행
- 레이아웃(Layout)작업
- CSS 처리
- 그리기
- 이벤트 처리
- HTML 편집
HTML문서 처리
위 그림은 웹 엔진이 어떻게 HTML 문서를 처리하는 보여주고 있다. 각 단계에 대하여 설명하면 다음과 같다.
불러오기(Loading)
불러오기는 HTTP 모듈 또는 파일시스템으로 전달 받은 리소스 스트림(resource stream)을 읽는 과정을 말한다. 로더(Loader)가 이 역할을 맡고 있다. 로더는 단순히 읽는 것이 아니라, 이미 데이터를 읽었는지도 확인하고, 팝업창을 열지 말지, 또는 파일을 다운로드 받을 지를 결정한다.
파싱(Parsing)
파싱은 DOM(Document Object Model) 트리를 만드는 과정이다. 일반적으로 웹 엔진은 HTML, XML 파서가 각각 갖고 있다. HTML파서는 말 그대로 HTML문서를 파싱하는데 사용되고, XML파서는 XML 형식을 따르는 SVG, MathML 등을 처리하는데 사용한다.
렌더링 트리(Rendering Tree) 만들기
파싱으로 생성된 DOM 트리는 HTML/XML문서의 내용을 트리 형태로 자료구조화 한 것이다. 실제 이 내용을 화면에 표시하기 위해서는 다른 형태의 데이터 구조가 필요하다. 다시 말해, DOM 트리는 내용 자체를 저장하고 있고, 화면에 표시하기 위한 위치와 크기 정보, 그리는 순서 등을 저장하고 별도의 트리 구조가 필요하다. 이를 일반적으로 렌더링 트리라고 부른다.
이렇게 따로 존재하는 이유는 HTML의 문서의 <head>, <title>, <body> 태그와 같이 화면에 표시될 필요가 없는 태그도 있고, CSS “Display” 속성(property) 값이 None에 들어맞는 태그도 렌더링 트리에 추가되지 않는다.
CSS 스타일(Style) 결정
CSS는 HTML의 문서에서 내용과 별도로 표현을 나타내기 위해 만들어졌다. CSS 스타일은 셀렉터(selector) 정의에 따라 적용되는 태그가 다를 수 있어서, 모든 CSS 스타일을 분석하여 최종적으로 어떤 태그에 어떤 스타일 규칙이 적용되는지를 결정해야 한다.
레이아웃(Layout)
렌더링 트리가 생성될 때, 각 렌더(Render) 객체는 위치나 크기를 가지고 있지 않다. 각 렌더 객체가 위치와 크기가 갖게 되는 과정을 레이아웃(Layout)이라고 한다.
그리기(Painting)
그리기 단계는 렌더링 트리를 탐색하면서 특정 메모리 공간에 RGB값을 채우는 과정이다. 마치, 그릴 대상을 적은 카드 뭉치에서 맨 윗장 부터 하나씩 꺼내어 적힌 대상을 빈 종이에 그리 것과 비슷하다고 볼 수 있다. 물론 카드에는 어느 위치에 어떤 크기로 그릴지, 어떤 색깔로 그릴지 자세히 적혀있다.
위 모든 단계를 거칠 때, 비로서 우리눈에 웹페이지가 보이게 되는 것이다. 말로는 표현하니 간단해 보이지만, 이와 같은 과정이 실제 수백만줄로 된 코드로 구현되었으니, 각 단계별로 얼마나 복잡도가 높은지 헤아릴 수 있다.
다음 글에는 로더에 대해 상세하게 소개하려고 한다.
참고
<참조>
1.미래웹기술연구소, http://w3labs.kr/?p=980