[정리] 브라우저의 작동 방식

브라우저의 구조는 다음과 같다.

1. 사용자 인터페이스

여기에는 주소 표시줄, 뒤로/앞으로 버튼, 북마크 메뉴 등이 포함된다.

요청한 페이지가 표시되는 창을 제외한 브라우저 디스플레이의 모든 부분이다.

2. 브라우저 엔진

UI와 렌더링 엔진간의 작업을 마셜링한다.

마셜링이란 한 객체의 메모리에서 표현방식을 저장 또는 전송에 적합한 다른 데이터 형식으로 변환하는 과정이다.

3. 렌더링 엔진

요청된 콘텐츠 표시를 담당한다.

예를 들어 요청한 콘텐츠가 HTML인 경우 렌더링 엔진은 HTML과 CSS를 구문 분석하고 콘텐츠를 화면에 표시한다.

4. 네트워킹

HTTP 요청과 같은 네트워크 호출을 위해 사용한다.

플랫폼의 독립적인 인터페이스이며 각 플랫폼의 하부에서 실행된다.

5. UI 백엔드

콤보 상자 및 창과 같은 기본 위젯을 그리는데 사용된다.

이 백엔드는 플랫폼에 따라 다르지 않은 일반 인터페이스를 노출한다.

6. 자바스크립트 인터프리터 

자바스크립트 코드를 분석하고 실행하는데 사용된다.

7. 데이터 저장

브라우저는 쿠키와 같은 모든 종류의 데이터를 로컬에 저장할수 있다.

localStorage, SessionStorage 등이 있다.

 

크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지하기 떄문에 각 탭은 독립적인 프로세스로 처리된다.

 

 

렌더링 엔진

렌더링 엔진의 역할은 요청받은 내용을 브라우저 화면에 표시하는 일이다.

렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다.

파이어폭스는 모질라에서 직접 만든 게코(Gecko)엔진을 사용하고 사파리와 크롬은 웹킷(Webkit)엔진을 사용한다.

 

다음은 렌더링 엔진의 기본적인 동작 과정이다.

렌더링 엔진은 HTML을 파싱하여 태그를 DOM 트리로 변환한다.

그 다음 CSS파일을 파싱하여 스타일 정보를 가져와 렌더링 엔진 자체에서 사용하는 렌더 트리를 생성한다.

렌더 트리는 DOM트리와 유사하지만 렌더링을 위해 필요하지 않은 노드(head, meta, script등)는 포함되지 않는다.

 

렌더 트리 생성이 끝나면 각 노드가 정확한 위치에 표시되는 렌더 트리 배치(Layout) 단계가 시작된다.

그 다음 UI백엔드에서 렌더 트리를 사용하여 화면에 그리는 단계인 렌더 트리 그리기(Paint) 단계가 이루어진다.

 

요약하면, HTML을 파싱하여 DOM트리를 생성하고 CSS파일을 생성하여 렌더 트리를 생성한다.

그 후 렌더 트리 배치와 그리기 단계를 거쳐 브라우저 창에 실제로 보여지는 뷰를 생성한다.

 

렌더링 엔진은 좀 더 나은 사용자 경험을 위해 모든 HTML을 파싱할 때까지 기다리지 않고 받은 내용의 일부를 먼저 화면에 표시한다. 동시에 네트워크로부터 나머지 내용이 전송되기를 기다린다.

웹킷 동작 과정

게코 렌더링 엔진 동작 과정

자바스크립트 인터프리터

자바스크립트 인터프리터는 자바스크립트 코드를 실행하는 소프트웨어이다.

자바스크립트는 일반적으로 클라이언트 측에서 실행되며, 자바스크립트 인터프리터는 브라우저 내부에서 작동한다.

일반적으로 자바스크립트 코드는 인터프리터에 의해 한 줄씩 읽혀지며, 각 줄은 바로 실행된다.

이렇게 보면 자바스크립트는 한줄씩 바로바로 읽어나가는 인터프리터 언어이다.

하지만 최근에는 JIT 컴파일러를 사용하여 인터프리터의 성능을 향상시켰다.

JIT 컴파일러는 인터프리터가 실행중인 코드를 바이트 코드로 컴파일하고, 이를 다시 네이티브 코드로 컴파일 한다.

따라서 자바스크립트는 컴파일과 인터프리터가 섞인 형태라고 할 수 있다.

 

자바스크립트 인터프리터에는 힙과 콜스택이라는 두 가지 메모리 공간을 사용한다.

(1) 힙

힙은 동적으로 생성된 데이터를 저장하는 메모리 영역이다.

예를 들어 객체, 배열, 전역변수는 보통 힙에 저장된다.

힙은 동적으로 메모리 공간이 늘어날 수 있으므로 동적인 데이터를 저장하기에 적합하다.

힙에서 더이상 사용하지 않는 데이터는 가비지컬렉터에 의해서 적절한 순간에 제거되어 메모리 누수를 방지한다.

(2) 콜스택

콜스택은 지역변수나 함수 호출을 추적하는 메모리 영역이다.

함수가 호출될 때마다 새로운 프레임이 스택에 추가되고 함수가 종료될 때마다 프레임이 스택에서 제거된다.

콜스택은 크기가 정해져 있으므로 재귀함수를 무한정 호출하다보면 스택오버플로우 라는 오류를 마주할 수 있다.

 

참고자료

https://web.dev/howbrowserswork/