브라우저 렌더링 과정

브라우저란?

우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Edge, Firefox 등을 말한다.

브라우저는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해

다른 페이지로 이동할 수 있도록 하는 프로그램이다.

 

브라우저는 사용자가 원하는 페이지에서 필요한 자원을 서버로부터 받아와서

유저에게 보여준다. 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함한다.

 

브라우저는 받아온 자원들(페이지, 이미지, 비디오)을 렌더링 과정을 통해

사용자에게 보여준다.

 

렌더링이란?

서버로부터 HTML, CSS, Javascript 등 제공받은 파일들을 가공하여 브라우저에 보여준다.

 

브라우저의 기본 구조

브라우저의 주요 구성 요소는 아래와 같다.

그림 1

 

1. 사용자 인터페이스

• 주소표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분

2. 브라우저 엔진

• 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.

3. 렌더링 엔진

• 요청한 콘텐츠를 표시
• HTML을 요청하면 HTML 과 CSS 를 파싱하여 적절하게 화면 표시한다.

4. 통신

• HTTP 요청과 같은 네트워크 호출에 사용한다.

5. UI 백엔드

• 콤보 박스와 창 같은 기본적인 장치를 그린다.
• 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다.

6. 자바스크립트 해석기

• 자바스크립트 코드를 해석하고 실행한다.

7. 자료 저장소

• 자료를 저장하는 계층이다.
• 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다.
• HTML5 명세에는 브라우저가 지원하는 웹 데이터 베이스가 정의되어 있다.

 

크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다.

각 탭은 독립된 프로세스로 처리된다.

 

브라우저 렌더링 동작 과정

1. 서버로부터 자원 제공받기

• 사용자가 브라우저를 통해 특정 URL로 접근하게 되면 페이지에서 필요한 자원을 서버로부터 요청하고 응답받는다.

 

2. HTML 및 CSS 파싱

• HTML 파서와 CSS 파서가 HTML 파일 및 CSS 파일을 파싱해서 DOM Tree, CSSOM Tree를 만든다. (Parsing)
• 개발한 소스를 브라우저가 이해할 수 있는 언어로 변환한다.

   

그림 2

 

3. 렌더링 트리 생성

• 생성한 DOM 과 CSSOM Tree 를 가지고 렌더링 트리를 생성한다.
• DOM Tree 와 CSSOM Tree 를 합친다고 보면 된다.

 

4. JavaScript 파싱 및 AST 생성

• AST는 추상 구문 트리를 말하며, 이를 기반으로 인터프리터가 바이트코드(기계어)를 생성한다.
• HTML 및 CSS 파싱 중 JS script 태그를 만나게 되면 블로킹되어 제어권을 JavaScript 엔진에게 넘겨주어 Javascript 파싱으로 넘어간다.
• AST 생성과정
  1. JavaScript 코드는 각각 의미를 갖는 토큰으로 분해
  2. 각 토큰은 서로 결합하여 AST 를 형성한다.
  3. AST는 바이트코드로 변환되어 인터프리터가 실행한다.

 

5. CSS 및 레이아웃

• 생성된 렌더링 트리를 각 노드의 위치와 크기를 계산한다.
• 렌더링 트리에서 위치, 크기 등을 알 수 없기 때문에 각 객체들에게 위치 및 크기를 정해주는 과정이다.
• CSS 는 선택자에 따라서 적용되는 태그가 다르기 때문에 모든 CSS 스타일을 분석해 스타일 규칙이 적용되게 결정한다.

그림 3

 

6. 그리기

• 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만들어 화면에 나타낸다.

 

 

참고

그림 1 : https://d2.naver.com/helloworld/59361

그림 2, 그림 3 : https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/