[CS] 브라우저 렌더링 과정

 

기술면접을 위해 CS공부를 하는 중, 스터디에서 "웹페이지가 브라우저에 렌더링이 되는 과정을 설명해 주세요."라는 질문이 나왔습니다. 생각을 해보니 www.naver.com을 주소창에 입력하면 어떻게 브라우저에 렌더링이 되는지에 대해 궁금해서 공부하면서 정리했습니다. 

 

우선 용어를 먼저 알아야 이해를 할 수 있다고 생각해 먼저 "브라우저", "파싱", "렌더링" 용어에 대해서 먼저 알아봅시다.

Browser (브라우저)

Edge, Chrome, Safari, Firefox와 같은 인터넷을 접속하는 것을 브라우저라 한다. 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램이다.

 

Parsing (파싱)

프로그래밍 언어로 작성된 파일을 실행시 키기 위해 구문 분석(Syntax analysis)을 하는 단계이다. 파일의 문자열들을 문법적 의미를 갖는 최소 단위인 "토큰"으로 분해하고, 이 토큰들을 문법적 의미와 구조에 따라 노드라는 요소로 만든다. 노드들은 상하관계를 반영해 트리를 형성하는데, 이 트리를 파스트라고 한다.

 

Rendering (렌더링)

렌더링이란, 개발자가 작성한 문서 (HTML, CSS, JavaScript)를 파싱해, 브라우저에서 그래픽 형태(시각적)로 출력하는 것을 말한다.

 

 

브라우저 렌더링 전체 과정

1. 서버로부터 넘겨받은 HTML CSS 파일을 파싱 한다.
2. 파싱 한 HTML CSS가 각각 트리를 만들고 HTML은 DOM을 CSS는 CSSOM을 생성하고, 이들을 결합해 렌더트리를 생성한다.
3. 중간에 HTML 파서는 Script태그를 만나면 JS를 파싱해 AST를 생성하고, 바이트코드로 변환해 실행한다.
4. 렌더트리에서 브라우저의 뷰포트 내에 각 노드들의 정확한 위치와 크기(레이아웃)를 계산한다.
5. 레이아웃에서 계산이 완료된 요소들을 실제 화면에 페인팅한다.

 

요약

서버로부터 Index.html 파일을 리소스 서버에 요청하고, 응답으로 받아와 텍스트로 이루어진 HTML CSS 파일을 파싱해 각각 HTML은 DOM을 생성하고 CSS은 CSSOM을 생성해서 둘을 결합해 렌러트리를 생성한다. 이 과정 중에 HTML파서는 Script태그를 만나게 되면 JavaScript 코드를 실행하기 위해 파싱을 중단하고 자바스크립트 엔진에게 제어권한을 넘기고, 자바스크립트 코드 또는 파일을 로드해서 파싱하고 실행한다. 이후 렌더트리는 요소들의 크기, 위치를 계산하는 레이아웃 작업과 픽셀을 통해 화면에 실제로 그리는 작업인 페인팅 단계에 활용되고 모든 과정을 마치면 실제 화면에 페인팅 작업을 해 웹페이지를 볼 수 있게 된다.