브라우저 렌더링 과정

대부분의 프로그래밍 언어는 운영체제나 가상머신 위에서 실행되지만 웹 애플리케이션의 클리언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행됩니다. 따라서 브라우저 환경을 고려할 떄 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능합니다.

브라우저 렌더링 과정

1. 브라우저는 HTML, CSS, 자바스크립트, 이미지 폰트 파일 등 렝더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다.
2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성합니다.
3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행합니다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있습니다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됩니다.
4. 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저의 화면에 HTML 요소를 페인팅합니다.

HTTP

HTTP는 웹에서 브라우저와 서버가 통신을 하기 위한 프로토콜입니다. 예전 HTTP 1.*에서는 여러 개의 요청을 한 번에 전송할 수 없었고 응답도 마찬가지였습니다. HTTP 2가 발표되면서 다중 요청과 응답이 가능해졌습니다. HTTP 1.*보다 페이지 로드 속도가 더 빨라졌습니다.

HTML 파싱

브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수 텍스트입니다. 브라우저에 렌더링을 하려면 이 순수 텍스트를 브라우저가 이해할 수 있는 자료구조로 변환해서 메모리에 저장해야 합니다.

 

브라우저 렌더링 엔진은 서버로부터 응답 받은 HTML 문서를 파싱해서 브라우저가 이해할 수 있는 DOM을 생성합니다. 처음 HTML 문서를 받을 때는 2진수 형태의 바이트로 응답을 받고, meta 태그의 charset 어트리뷰트에 의해 지정된 인코딩 방식으로 문자열로 변환됩니다.(인코딩 방식은 응답 헤더에 담겨있습니다.) 이후 문자열을 토큰이라는 문법적 최소 단위로 나누고 각 토큰을 가지고 노드 객체를 생성합니다. 노드들은 트리 구조를 구성하는데, 이 노드들이 구성한 트리 구조를 DOM이라 부릅니다.

CSS 파싱

렌더링 엔진이 HTML 파일을 파싱하다가 CSS를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 중단합니다. 그리고 link 태그의 href 어트리뷰트에 지정된 CSS 파일을 서버에 요청해서 CSS 파일을 응답 받습니다. 이후 style 태그 내의 CSS 혹은 CSS 파일을 HTML과 동일한 파싱 과정을 거치며 CSSOM을 생성합니다. 그 다음 CSS 파싱이 끝나면 HTML 파싱이 중단된 지점부터 다시 HTML을 파싱합니다.

렌더 트리

렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱해서 각각 DOM과 CSSOM을 생성합니다. 그리고 DOM과 CSSOM은 렌더링을 위해 렌더 트리로 결합됩니다. 렌더 트리는 렌더링을 위한 트리 구조의 자료구조이며, 렌더링 되지 않는 노드와 CSS에 의해 렌더되지 않는 노드들은 포함되지 않습니다.

 

렌더 트리는 레이아웃을 계산할 때 사용되며 브라우저 화면에 페인팅 처리에 입력됩니다.

자바스크립트 파싱

script 태그를 만나게 될 때에도 DOM 생성이 중단됩니다. 이후 서버에서 자바스크립트 파일을 응답 받으면, 자바스크립트 엔진에 제어권이 넘어갑니다. 자바스크립트 엔진은 자바스크립트 파싱과 실행을 처리합니다. 자바스크립트 코드를 해석하여 AST(Abstract Syntax Tree, 추상적 구문 트리)를 생성합니다. 이후 AST를 바탕으로 바이트코드를 생성하고 실행합니다.

 

만약 자바스크립트 코드에 DOM이나 CSSOM을 수정하는 DOM API가 있다면, 수정된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 레이아웃과 페인트 과정을 거쳐 브라우저 화면에 다시 렌더링됩니다. 이를 리플로우, 리페인트라 합니다. 레이아웃에 영향이 없을 경우에는 리페인트만 실행됩니다.