브라우저는 어떻게 작동하는가?
1. 브라우저의 렌더링 원리 및 과정 설명
사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행.
자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.
크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지하는 것이 주목할만하다. 각 탭은 독립된 프로세스로 처리된다.
1-1 렌더링 엔진
렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다.
렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다. 물론 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다.
렌더링 엔진들
이 글에서 다루는 브라우저인 파이어폭스와 크롬, 사파리는 두 종류의 렌더링 엔진으로 제작되었다. 파이어폭스는 모질라에서 직접 만든 게코(Gecko) 엔진을 사용하고 사파리와 크롬은 웹킷(Webkit) 엔진을 사용한다.
웹킷은 최초 리눅스 플랫폼에서 동작하기 위해 제작된 오픈소스 엔진인데 애플이 맥과 윈도우즈에서 사파리 브라우저를 지원하기 위해 수정을 가했다. 더 자세한 내용은 webkit.org를 참조한다.
1-2 브라우저 렌더링 과정
- 사용자가 사용자 인터페이스의 주소표시줄에 URI를 입력하여 브라우저 엔진에 전달한다.
- 브라우저 엔진은 먼저 자료 저장소에서 전달된 URI에 대한 정보를 찾고, 있다면 해당 데이터를 렌더링 엔진으로 전달한다 -> 없으면 렌더링 엔진 - 통신 레이어로 전달 후 통신 레이어가 서버에 요청해서 해당하는 정보를 받아온다.
- 렌더링 엔진은 통신 레이어에서 받거나, 자료 저장소에서 받아온 HTML, CSS를 파싱한다
3-1 HTML 파싱하여 DOM tree 생성
3-2 CSS 파싱하여 CSSOM 생성 - 자바스크립트 파일은 자바스크립트 해석기가 파싱한다.
- 자바스크립트 해석기는 파싱한 결과를 렌더링 엔진에 전달하여 만들어진 DOM tree를 조작한다.
- 조작이 완료된 DOM Node(DOM tree안에 있는 요소)는 render ojbect(render tree안에 있는 요소)로 변한다.
- UI 백엔드가 render object를 브라우저 렌더링 화면에 띄워준다.
