Web browser 동작 과정

사용자가 크롬과 같은 웹 브라우저 주소창에 URL을 입력하면 이를 DNS로부터 IP 주소를 받은 뒤(어떻게 IP 주소를 받는지 보러가기),

웹서버를 통해 해당 IP의 화면에 보여줄 Data를 요청한다. 받은 Data를 이용하여 화면에 출력을 한다.

 

어떤 방식으로 Data를 처리하여 화면에 출력하는지 정리해보려고 한다.

 

우선 받은 Data(HTML, CSS, Img 등)는 웹 표준화 기구인 W3C의 명세에 따라 해석한다.

 

- 용어

 1. DOM (Document Object Model) : 파싱한 HTML 파일 내용과 구조를 자바스크립트가 이해할 수 있는 객체 행태로 변경한 것

 2. CSSOM (Cascading Style Sheets Object Model) : 파싱한 CSS 정보를 객체 형태로 변경한 것

 3. AST (Abstract Syntax Tree) : 프로그래밍 언어 문법에 따라 소스 코드 구조를 표시하는 계층적 프로그램 표현, 각 AST 노드는 소스 코드의 항목(item)에 해당, 컴파일러가 생성

AST 예시

 

- 브라우저의 구성 요소

 

 

 1. 사용자 인터페이스 (User Interface) : 주소 표시줄, 이전 / 다음 버튼, 북메크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분

 

 2. 브라우저 엔진 (Browser Engine) : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

 

 3. 렌더링 엔진 (Rendering Engine) : 요청한 콘텐츠를 표시, HTML과 CSS를 파싱하여 화면에 표시함

 

 4. 통신 (Networking) : HTTP 요청과 같은 네트워크 호출에 사용, 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행 됨

 

 5. UI 백엔드 (UI Backend) : 브라우저가 동작하고 있는 운영체제의 인터페이스를 따르는 UI들을 처리함. (ex. alert, select box 등)

 

 6. 자바스크립트 해석기 (JavaScript Interpreter) : 자바스크립트 코드를 해석하고 실행

 

 7. 자료 저장소 (Data Persistence) : 자료를 저장하는 계층, 데이터를 로컬에 저장하기 위한 계층으로 쿠키나 로컬 스토리지, 세션 스토리지, 파일 시스템 등에 접근하고 데이터를 저장하는데 사용

 

 

- 동작 과정

 

렌더링 엔진 중 하나인 WebKit 동작 과정

 

 1. 브라우저의 렌더링 엔진은 HTML을 Parsing하여 DOM Tree를 생성

 

 

 2. 렌더링 엔진이 style 태그를 만난다면 CSS Parsing 작업을 시작하여 CSSOM Tree를 생성

 

 

 3. 작업 후 중단된 HTML Parsing 작업을 실행하는데 그러다가 script 태그를 만난다면 다시 중단하고 자바스크립트 인진(해석기)에게 권한을 넘김

 

 4. 자바스크립트 엔진(해석기)은 코드를 해석하여 추상 구문 Tree인 AST(Abstract Syntax Tree)를 만들고 실행

 

 5. 완성된 DOM Tree와 CSSOM Tree를 더하여 Render Tree를 생성하며, 페이지에 표현되지 않는 노드들은 포함되지 않음. (이 과정까지를 Construction이라고 함)

 

 

 6. 렌더링 엔진은 Layout 작업(Render Tree의 노드들을 화면의 올바른 위치에 표시) 진행

 

 7. UI Backend가 Render Tree의 노드들을 순회하면서 UI를 그림

 

 8. 노드들의 z-index에 따라 레이어를 순서대로 구성(Composition)  (이 과정까지를 Operation이라고 함)

 

 9. 결과 화면 출력