웹브라우저가 웹서버에 웹페이지 요청을 하면 웹서버는 웹페이지 응답을 한다.
즉, 서버가 브라우저에게 HTML문서를 전달하고 브라우저는 이를 읽고 해석한 후 Client에게 보여준다.
HTML 및 CSS를 해석하는 구체적인 내용들은 모두 W3C(World Side Web Consortium)에 의해 관리된다.
지난 몇년간 브라우저들은 각자 이러한 구체적 규정들의 일부만 충족하며 각 브라우저별 확장 기능을 개발해 왔다. 브라우저별 호환성 이슈가 발생할 수 밖에 없는 구조.
웹 브라우저의 구조와 렌더링 엔진
User Interface : 주소창, 뒤로/앞으로 버튼 등을 포함한 화면
Browser Engine : UI와 Rendering Engine 사이에서 중간 매체 역할을 수행
Rendering Engine : 웹서버로부터 응답 받은 내용을 UI 상에 나타냄
Networking : 웹 서버와 통신이 가능하게 함
Javascript Interpreter : 자바스크립트 코드를 파싱하고 실행
UI Backend : UI 구동이 가능하게 함
Data Persistence(Data Storage) : 쿠키와 같은 로컬 데이터를 저장
렌더링 엔진
- 사용자가 요청해서 웹서버가 응답한 HTML 문서를 HTML과 CSS로 파싱해서 화면을 구성
** 파싱 : 어떤 페이지(문서, HTML 등)에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것
- 렌더링 엔진은 여러 개의 인스턴트를 한 번에 구동할 수 있다.
- IE(Internet Explorer) : Trident
FireFox : Gecko
Safari : Webkit
chrome, opera : Webkit의 일종인 Blink
- Webkit은 오픈소스 렌더링 엔진으로 원래 리눅스 플랫폼에 사용되었다.
렌더링 엔진 동작 방식
렌더링 엔진은 웹서버로부터 전달받은 HTML 문서를 맨 처음 네트워크 레이어에서 불러온 후 아래와 같은 FLOW를 거친다.
1. HTML 파싱 후 DOM 트리 만들기
2. 렌더 트리(Render Tree) 만들기
3. 렌더 트리(Render Tree) 레이아웃 만들기
4. 렌더 트리 페인팅(Render Tree Painting)
HTML 파싱 후 DOM 트리 만들기
렌더링 엔진은 우선 네트워크 레이어를 통해 전달받은 HTML 문서를 파싱하여 각 요소들을 DOM Tree의
각 DOM 노드들로 전환한다.
** DOM(Document Object Model) : 마크업 형태의 HTML 문서를 오브젝트 모델의 형태로 바꿔놓은 것
<html>
<body>
<p>Hello world</p>
<div><img src="example.png"></div>
</body>
</html>
HTML, body 부모 태그 안에 단락을 나타내는 <p>, 한 요소를 나타내는 <div> 태그가 자식 태그로 존재
렌더 트리(Render Tree) 만들기
HTML 문서들을 파싱하여 DOM Tree를 구성한 후,
렌더링 엔진은 CSS/STYLE 데이터를 파싱하고 그 스타일 데이터들로 렌더 트리(Render Tree)를 만든다.
DOM Tree가 웹 상에 나타날 내용을 구성한다면 렌더 트리는 시각적 요소, 어떻게 나타날지 스타일 지정함
렌더 트리 각각의 정사각형에 해당하는 Renderer들은 DOM Tree 요소들에 적용되지만 1:1관계가 성립되는 것은 아니다. 또한 시각적이지 않은 DOM 요소들은 렌더 트리에 삽입될 수 없다(ex.<head>태그)
렌더 트리(Render Tree) 레이아웃 만들기
레이아웃을 만든다는 것은 각 노드들에게 스크린의 어느 공간에 위치해야 할지 각각의 값을 부여하는 것
렌더 트리 페인팅(Render Tree Painting)
렌더 트리가 만들어져 레이아웃이 구성되었다면, UI 백앤드가 동작하여 각 노드들을 정해진 스타일 및 위치값대로 화면에 배치한다.
더 나은 UX를 위해, 렌더링 엔진은 각 콘텐츠를 가능한한 빨리 스크린에 띄워야하기 때문에 모든 HTML 요소들을 렌더링 엔진으로 넣어서 한번에 출력하는 것이 아닌, 일부 콘턴츠는 먼저 트리 과정을 거쳐 스크린에 나타나고, 그 와중에 웹의 다른 요소들은 네트워크를 통해 렌더링 엔진으로 읽어들어 오는 순차적인 방식으로 입출력 진행
'CS' 카테고리의 다른 글
| 동시성(Concurrency)와 병렬성(Parallelism) (0) | 2021.12.28 |
|---|---|
| 호스팅이란 무엇인가 (0) | 2021.12.28 |
| DNS와 작동 원리 (0) | 2021.12.28 |
| 웹의 동작 방식 (0) | 2021.12.27 |
| 인터넷 작동의 원리(Network) (0) | 2021.12.27 |