CS 공부를 하다보면 주소창에 google.com 을 입력했을 때 일어나는 일에 대해 생각해보게 됩니다.
웹에서 가장 기본적인 부분이지만 비전공자에게는 익숙치 않은 부분이라 쉽지 않았습니다.
이 때 받아온 HTML 파일은 어떻게 브라우저에 렌더링 되는지 정확하게 이해하려고 정리해보려 합니다.
웹 개발자가 만든 어플리케이션은 브라우저에서 렌더링 과정을 거친 후 확인할 수 있습니다.
렌더링을 하는 프로세스 자체는 간단하지만, 잦은 렌더링은 성능 저하를 일으킬 수 있습니다. 그렇기 때문에 웹 브라우저의 렌더링 과정을 잘 이해한다면, 렌더링에 필요한 리소스를 최적화함으로써 성능향상을 기대할 수 있습니다.
1. 브라우저의 기능과 구조
1-1 브라우저 주요 기능
브라우저의 주요 기능은 사용자가 선택한 자원을 server에 요청하고 browser에 표시하는 것입니다.
자원은 보통 HTML 문서지만 다른 형태일 수도 있습니다. 자원의 주소는 URI (Uniform Resource Identifier) 에 의해 정해집니다.
1-2 브라우저 기본 구조
브라우저의 기본 구조는 크게 7가지로 구성되어 있습니다.
1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분.
2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
3. 렌더링 엔진 - 요청한 컨텐츠를 표시. 예를 들어 HTML 을 요청하면 HTML과 CSS를 파싱(Parsing) 하여 화면에 표시.
4. 통신 ( Network ) - HTTP 요청과 같은 네트워크 호출에 사용됨. 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
5. 자바스크립트 엔진 - 자바스크립트 코드를 해석하고 실행.
6. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인텋페이스로서, OS 사용자 인터페이스 체계를 사용.
7. 자료 저장소 - 로컬스토리지, 쿠키와 같이 보조 기억장치에 데이터를 저장하는 역할.
2. 브라우저 렌더링
파싱과 렌더링이란 ?
- 파싱 : 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고 실행하기 위해 텍스트 문자의
문자열을 분해하고 구조를 생성하는 일련의 과정- 렌더링 : HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에
시각적으로 출력
2-1 브라우저 렌더링 과정
브라우저 렌더링 과정은 크게 다섯단계로 구분됩니다.
- 서버로부터 요청받은 HTML과 CSS를 파싱하여
DOM ( Document Object Model ),CSSOM ( CSS Object Model )생성 - DOM 트리와 CSSOM 트리를 기반으로
Render Tree를 생성 DOM Tree와 달리 Render Tree에는스타일 정보가 설정되어 있으며 실제 화면에 표현되는 노드들로만 구성되어 있다. (display: none이나 head처럼 보이지 않는 요소는 포함되지 않는다) - Render Tree를 기반으로 HTML 요소의
Layout(위치, 크기)을 계산 - Layout 계산이 완료되면 화면을 그릴 준비를 하며 레이어를 만드는
Paint단계 진행 - 만든 레이어들을
Composition (합성)하여 화면에 출력
2-2 HTML 파싱 DOM 생성
HTML 문서가 DOM 트리로 파싱되는 과정을 그림과 함께 자세히 살펴봅시다.
- 서버로부터 HTML문서를
바이트(2진수)로 응답받는다. - 응답받은 바이트 형태의 HTML을 meta태그 charset 어트리뷰트에 의해 지정된 인코딩 방식(ex: UTF-8)을 기준으로
문자열로 변환된다. - 문자열로 변환된 HTML 문서를 문법적 의미를 갖는
토큰들로 분해한다. - 각 토큰들을 객체로 변환하여
노드들을 생성한다. 토큰 내용에 따라 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드가 생성된다. - 노드들을 트리 자료구조로 구성한
DOM(Doucment Object Model)이 완성된다.
즉, DOM은 HTML 문서를 파싱한 결과물입니다.
2-3 CSS 파싱 CSSOM 생성
렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성해 나간다. DOM을 생성해 나가다가 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단한다.
link 태그의 href 어트리뷰트에 지정된 CSS 파일을 서버에 요청하여 로드한 CSS 파일이나 style 태그 내의 CSS를 HTML과 동일한 파싱 과정(바이트 -> 문자 -> 토큰 -> 노드 -> CSSOM)을 거치며 해석하여 CSSOM(CSS Object Model)을 생성한다. CSS 파싱을 완료하면 HTML 파싱이 중단된 지점부터 다시 HTML을 파싱하기 시작하여 DOM 생성을 재개한다.
2-4 Render Tree 생성
DOM과 CSSOM이 생성되면 렌더링을 위해 렌더 트리(Render Tree)로 결합된다. 렌더 트리는 브라우저 화면에 보여지지 않는 것들은 포함하지 않는다. (HTML meta 태그, CSS의 display: none 등) 즉, 렌더트리는 브라우저 화면에 렌더링되는 노드만으로 구성되어있다.
오늘은 Render Tree를 생성하는 부분까지 정리하고
다음편에서 Render Tree의 노드를 화면에 배치하는Layout과정부터Paint,Coposite까지 정리한 뒤 심화해서렌더링 최적화까지 정리하려고 합니다.
