브라우저 동작 원리

브라우저의 주요 기능

사용자가 입력한 URL 에 따라 Web Server 에 리소스를 요청(Request) 하고, 받아온 응답(Response) 을 브라우저 윈도우에 보여주는 것이다

 

- 리소스는 HTML 문서, PDF, image 외 여러 타입이 될 수 있다. 리소스의 위치는 사용자가 URI 로 특정할 수 있다

*URI (Uniform Resource Identifier) 는 하나의 리소스를 가리키는 문자열. URL 은 하위 개념으로, 웹상에서의 위치로 리소스를 식별함

- 브라우저가 HTML 파일을 해석하고 보여주는 방법은 HTML, CSS 명세에 특정돼 있다. 이 명세는 W3C, Web 표준화 기구에 의해 정해진다

 

브라우저의 구조

크게 7가지 요소로 구성된다. 받아온 리소스를 해석해 화면에 보여지는 데 중요한 역할을 하는 것은 "렌더링 엔진"이다

 

- UI: 주소창, 뒤로가기/앞으로가기 버튼, 북마크 메뉴 등등. 요청한 페이지를 보여주는 윈도우를 제외한 브라우저에서 보여지는 모든 부분들 (서로 다른 여러 브라우저의 UI 는 비슷하다)

- 브라우저 엔진: UI 와 렌더링 엔진 사이에서 동작을 제어함

- 렌더링 엔진: 요청한 콘텐츠를 보여줌. 예) 요청 콘텐츠가 HTML 이면, 렌더링 엔진이 HTML, CSS 를 파싱하고, 파싱한 콘텐츠를 화면에 보여줌

- 네트워킹: HTTP 요청같은 네트워크 요청에 사용됨. 플랫폼 독립적인 인터페이스

- UI 백엔드: 콤보박스, 윈도우 같이 기본 위젯을 그리는 데 사용됨. 플랫폼에 명시되지 않는 일반적인 인터페이스

- JS 해석기: JS 코드를 파싱하고 실행하는 데 사용됨

- 자료 저장소: 지속성이 있는 계층으로, 브라우저가 데이터를 로컬에 저장할 때 사용한다(예시: 쿠키). 브라우저는 또한 localStorage, IndexedDB 같은 자료 저장 매커니즘을 지원한다

 

브라우저의 주요 구성요소 from https://d2.naver.com/helloworld/59361

렌더링 엔진

렌더링 엔진은 요청한 콘텐츠를 브라우저 화면에 보여준다

 

- 기본적으로 HTML, XML 문서와 이미지를 보여줄 수 있다. 플러그인이나 확장 프로그램을 이용하면 다른 타입도 보여줄 수 있다(PDF 등등). 그러나 여기서는 CSS 로 꾸며진 HTML 과 이미지를 보여주는 주요 기능에 초점을 맞추겠다

- 브라우저는 서로 다른 렌더링 엔진을 사용한다. IE 는 Trident, FireFox 는 Gecko, Safari 는 Webkit 엔진을 사용한다

 

렌더링 엔진은 요청한 document 의 콘텐츠를 네트워크 계층에서 가져오면서 시작된다. 기본 플로우는 아래와 같다

1. HTML 을 파싱해 DOM tree 구성 > 2. Render tree 구성 > 3. Render tree 배치 > 4. Render tree 그리기

 

( HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM tree, CSSOM tree 로 변환되고, Render tree 로 결합된다. 이렇게 생성된 Render tree 를 기반으로 브라우저는 웹 페이지를 표시한다 )

 

1. 렌더링 엔진은 HTML Document 를 파싱해 요소를 "Content tree" 라는 트리의 DOM nodes 로 바꾼다

2. 엔진은 또한 스타일에 관련된 데이터도 파싱한다. 스타일링 정보와 HTML 표시 규칙은 또다른 트리인 "Render tree" 를 생성한다

- Render tree 는 색, 차원과 같은 비주얼 적인 속성들을 포함하는 사각형을 포함한다. 이 사각형들은 화면에 순서대로 표시된다

3. Render tree 가 구성되고 나면, "배치" 프로세스로 넘어간다. 이것은 각각의 노드가 화면의 어디에 정확히 나타나야 하는지를 표시하는 것이다

4. 그 다음은 그리기 단계- Render tree 가 그려지고 레이아웃이 구성되었다면, UI 백엔드가 동작해 각 노드들을 정해진 스타일 및 위치값대로 화면에 표시한다

 

이것은 점진적인 과정이다. 렌더링 엔진은 콘텐츠를 화면에 가능한 빨리 그리려고 시도한다. 렌더 트리를 구성하고 배치하기 전에 HTML 이 모두 파싱되기를 기다리지 않는다. 콘텐츠 일부가 파싱되고 보여지며, 나머지 콘텐츠를 네트워크로 부터 전달받는 프로세스도 동시에 진행된다

 

브라우저마다 렌더링 엔진이 동작하는 세부내용은 다를 수 있지만, 전체적인 플로우는 동일하다

 

웹킷 동작과정 from https://d2.naver.com/helloworld/59361

게코 렌더링 엔진 동작 과정 from https://d2.naver.com/helloworld/59361

- Render tree 와 DOM tree 는 1:1 로 매칭되지는 않는다

 

참고

https://it-ist.tistory.com/110

https://d2.naver.com/helloworld/59361

https://poiemaweb.com/js-browser

.