브라우저의 작동 방식
브라우저와 서버
브라우저의 작동 방식을 아주 간단하게 살펴보면,
브라우저가 서버에게 웹페이지 요청을 보내고,
서버는 이 요청에 따른 웹페이지 응답을 한다.
서버가 전달한 응답인 HTML문서를 브라우저가 읽고, 해석한 뒤에
사용자 (Client) 에게 보여준다.
이 HTMl 및 CSS를 해석하는 구체적은 내용들은
W3C (World Wide Web Consortium)가 관리, 유지한다.
브라우저의 구조
브라우저는 위 그림과 같이
UI, Browser Engine, Rendering Engine, Networking, JavaScript Interpreter,
UI Backend, Data Persistence로 구성된다.
- UI (User Interface) 주소창이라던지, 뒤로가기/앞으로가기 버튼 등의 User Interface
- Browser Engine UI와 Rendering Engine을 이어주는 매개체 역할
- Rendering Engine 웹 서버가 응답한 내용을 받아, UI에 나타내주는 역할
- Networking 이름 그대로, 웹 서버와 통신을 가능하게 해주는 역할
- JavaScript Interpreter JavaScript 코드를 파싱하고, 실행해주는 자바스크립트 해석기
- UI Backend UI의 구동이 가능하게 해주는 역할
- Data Persistence 쿠키, Local Stroage 등 로컬 Data를 저장
렌더링 엔진의 작동
위 브라우저 구조에서 Rendering Engine을 중심으로 브라우저의 작동을 살펴보자.
Rendering Engine (이하 렌더링 엔진)은 웹 서버가 응답한 HTML 문서를
가장 아래의 Networking에서 불러온다.
그 후 아래의 순서의 흐름을 가진다.
- HTML 파싱 후, DOM 트리 생성 → 우선 Networking을 통해 HTML문서를 파싱하고, 각 요소들을 DOM Tree (Contents Tree)의 각 DOM 노드들로 전환한다.
<html>
<body>
<p>이것은 p 태그입니다!</p>
<div>이건 div태그죠!</div>
</body>
</html>
위와 같이 html과 body 태그 안에 p, div태그가 있다. 이 코드를 DOM Tree로 전환하면 아래와 같이 구성된다.
-
렌더 트리 (Render Tree) 생성 DOM Tree 생성 후, CSS/Style 데이터를 파싱하고, 그 데이터들로 Render Tree를 생성한다. DOM Tree는 웹 상에 나타나는 내용(Contents)를 구성하고, Render Tree는 시각적인 요소를 구성한다.
-
렌더 트리 (Render Tree) 레이아웃 생성 각 노드들에게 Position, Size 등을 부여해 레이아웃을 생성한다.
-
렌더 트리 페인팅 (Render Tree Painting) 위의 과정을 거쳐 Render Tree와 레이아웃이 생성되었다면, UI Backend가 동작해 각 노드들을 정해진 Position, Size에 따라 화면에 배치한다.