브라우저의 작동 원리
Browser
- 브라우저의 주요 기능은 사용자가 참조하고 싶은 웹페이지를 서버에 요청하고, 서버의 응답을 받아 브라우저에 보여주는 것이며. 흔히 사용하는 크롬, 인터넷 익스플로러 등 인터넷 프로그램입니다.
- 서버의 응답은 주소를 통해 요청하는데, 이 주소를 URI(Uniform Resource Identifier)라고 합니다.
웹 브라우저와 웹 서버
- url을 주소창에 치고 나면 페이지가 이동하고 웹브라우저가 이동한 웹서버에 웹페이지 요청을 하면 웹서버는 웹페이지 응답을 합니다.
- 그리고 서버가 브라우저에게 전달한 응답인 HTML문서를 브라우저는 읽어들이고 해석한 후 사용자(Client) 에게 보여주고 HTML 및 CSS를 해석하는 구체적인 내용들은 모두 W3C, World Side Web Consortium 에 의해 관리되고 유지됩니다.
1. 보이지 않는 곳의 통신을 이해할 수 있다.
1-1 URL과 URI의 차이를 이해할 수 있다.
1-2 IP 주소와 PORT에 대해 이해할 수 있다.
1-3 DNS와 IP 주소의 관계를 설명할 수 있다.
1-4 크롬 브라우저의 에러 메시지를 통해 문제를 파악할 수 있다.
2. 보이는 곳의 통신을 이해할 수 있다.
2-1 AJAX의 개념을 이해할 수 있다.
2-2 SSR과 CSR의 차이를 이해할 수 있다.
2-3 CORS의 개념을 이해할 수 있다.
웹 브라우저 구조와 랜더링 엔진
- 유저 인터셉터(User Interface): 주소창, 뒤로/앞으로 버튼 등을 예를 들 수 있습니다.
- 브라우저 엔진(Browser engine): UI와 렌더링 엔진(Rendering engine) 사이에서 중간 매체 역할을 수행합니다.
- 렌더링 엔진(Rendering engine): 웹서버로부터 응답 받은 내용을 UI 상에 나타내줍니다.
- UI 백엔드(UI Backend): 웹서버와 통신이 가능하게 하는 네트워크, UI 구동이 가능하게 합니다.
- 자바스크립트 해석기(Javascript interpreter): 자바스크립트 코드를 파싱하고 실행합니다.
- 데이터 스토리지(Data storage, Data persistence): 쿠키와 같은 로컬 데이터를 저장합니다.
이 중 가장 핵심적인 역할을 담당하는 렌더링 엔진(Rendering engine)의 경우 사용자가 요청해서 웹서버가 응답한 HTML 문서를 HTML과 CSS로 파싱해서 화면을 구성합니다.
그리고 렌더링 엔진은 여러 개의 인스턴트를 한 번에 구동할 수 있습니다. 서로 다른 브라우저는 기본적으로 다른 렌더링 엔진을 사용하는데 인터넷 익스플로러(IE)는 Trident를, FireFox는 Gecko를, 사파리는 Webkit을 사용합니다. 구글 크롬과 오페라 브라우저는 Webkit의 일종인 Blink를 사용합니다.
랜더링 엔진 작동 방식
렌더링 엔진은 웹서버로부터 전달받은 HTML 문서를 맨 처음 네트워크 레이어에서 불러옵니다.
기본적으로 아래와 같은 기본적인 Flow 를 거칩니다.
HTML 파싱 후 DOM 트리 만들기 > 랜더 트리(Render Tree) 만들기 > 렌더 트리(Render Tree) 레이아웃 만들기 > 렌더 트리 페인팅 (Renter Tree Painting)
1. HTML 파싱 후 DOM 트리 만들기
<html>
<body>
<p>DOM 트리</p>
</body>
</html>
- 렌더링 엔진은 우선 네트워크 레이어를 통해 전달받은 HTML 문서(Source code)를 파싱(Parsing) 하여 각 요소들을 DOM Tree(Contents Tree)의 각 DOM 노드 들로 전환합니다.
- DOM이란 Document object model 의 준말로 마크업 형태의 HTML 문서를 오브젝트 모델의 형태로 바꿔놓은 것입니다. HTML 문서의 각 마크업과 DOM의 각 요소는 1:1 매칭됩니다.
2. 랜더 트리(Render Tree) 만들기
- HTML 문서들을 파싱하여 DOM Tree를 구성한 후, 렌더링 엔진은 CSS/Style 데이터를 파싱하고 그 스타일 데이터들로 렌더 트리(Render Tree)를 만듭니다.
- DOM 트리(DOM Tree)가 웹 상에 나타날 내용(Contents)를 구성한다면 렌더 트리(Render Tree)는 시각적 요소, 어떻게 나타날지 그 스타일을 지정하는데 렌더 트리는 색상, 차원 등 시각적 지침들을 담은 정사각형들로 구성되고 그 정사각형들은 스크린에 맞는 순서대로 정렬하게 됩니다.
- 렌더 트리(Render Tree) 각각의 정사각형에 해당하는 Renderer 렌더러 들은 DOM 트리(DOM Tree) 요소(element)들에 적용되지만 1:1 관계가 성립되는 것은 아닙니다.
- 즉 시각적이지 않은 DOM 요소들은 렌더 트리(Render Tree)에 삽입될 수 없습니다. 예를 들어 <head> 태그 안의 요소들은 화면에 나타나는 값들을 포함하지 않습니다.
- 따라서 그 어떤 Renderer도 적용될 수 없으며, 어떤 렌더러들은 DOM 노드에 적용될 수 있으나 꼭 트리의 같은 위계에 속할 필요는 없습니다.
3. 렌더 트리(Render Tree) 레이아웃 만들기
- 레이아웃을 만든다는 것은 각 노드들에게 스크린의 어느 공간에 위치해야 할지 각각의 값(Positionm, Size)을 부여하는 것을 의미합니다.
4. 렌더 트리 페인팅 (Renter Tree Painting)
- 렌더 트리가 만들어져 레이아웃이 구성되었다면, UI 백엔드(UI Backend)가 동작하여 각 노드들을 정해진 스타일 및 위치값대로 화면에 배치합니다.
정리
- 더 나은 UX(User experience)를 위해, 렌더링 엔진은 각 콘텐츠를 가능한한 빨리 스크린에 띄워야 합니다.
- 따라서 모든 HTML 요소들을 렌더링 엔진으로 넣어서 한번에 출력하는 것이 아니라, 일부 콘텐츠는 먼저 트리 과정을 거쳐 스크린에 나타나고, 그 와중에 웹의 다른 요소들은 네트워크를 통해 렌더링 엔진으로 읽어들어 오는 순차적인 방식으로 입출력이 진행됩니다.
1. 브라우저가 HTML을 받아서 어휘와 구문을 분석해 파싱 트리를 만들고
2. 이 파싱 트리를 기반으로 DOM요소와 노드속성을 가지는 DOM 트리를 생성하고 CSS도 마찬가지로 반복하여 CSSOM을 생성합니다
3. 이 DOM트리가 만들어지는 동안 브라우저는 DOM트리를 기반으로 렌더트리를 생성하고
4. 아직 위치와 크기가 정해지지않은 이 렌더트리를 각 노드의 화면에 그리면 화면에 콘텐츠가 표현됩니다
'프로그래밍 개발 > 프론트엔드 개발자 기본 지식' 카테고리의 다른 글
| 서버 사이드 랜더링(SSR)과 클라이언트 사이드 랜더링(SPA) (0) | 2022.04.23 |
|---|---|
| CSS 방법론 (0) | 2022.04.23 |
| 웹접근성(Web Accessibility) (0) | 2022.04.17 |
| CORS(크로스 도메인) (0) | 2022.04.17 |
| AJAX (Asynchronous Javascript And XML) (0) | 2022.04.17 |
댓글