브라우저의 렌더링 원리

이 문서에서 사용되는 그림은 모두 네이버 D2의 브라우저는 어떻게 동작하는가?에서 발췌하였습니다.

브라우저의 구성 요소

출처 : 네이버 D2

1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
3. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행.
7. 자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

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

(그래서 메모리를 많이 먹나보다...)

렌더링 엔진이란?

렌더링 엔진은 서버로부터 요청 받은 내용을 브라우저의 화면에 표시하는 일을 한다.

렌더링 엔진은 HTML, XML 문서, 이미지를 표시할 수 있다. 플러그인, 브라우저 확장 기능 등을 이용해 PDF와 같은 다른 리소스도 표현할 수 있다.

렌더링 엔진의 종류

• Chrome의 V8
• Safari의 WebKit
• Firefox의 Gecko(개코..?)
  ...

렌더링 엔진의 동작 과정

출처 : 네이버 D2

1. HTML 문서를 파싱하고 변환하여 DOM(Document Object Model) 트리를 생성한다.
2. 외부 CSS 파일과 함께 인라인 스타일 요소를 파싱하고 변환하여 CSSOM(CSS Object Model) 트리를 생성한다.
3. DOM 트리와 CSSOM 트리를 이용하여 렌더 트리를 생성한다.
4. 렌더 트리의 생성이 종료되면, 렌더 트리의 각 노드들을 정확한 위치에 배치하고 다양한 값을 계산한다.
5. 브라우저의 실제 화면에 그리기 과정을 한다.

출처 : 네이버 D2

이 그림은, Safari의 WebKit 엔진의 동작 과정을 나타낸 것이다.