Browser 특징
- 브라우저의 주요 기능은 사용자가 참조하고 싶은 웹페이지를 서버에 요청, 서버의 응답을 받아 브라우저에 표시하는것
- ex) 크롬 , 사파리 , 파이어폭스 , 인터넷 익스플로러 등
- 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의 개념을 이해할 수 있음
- 유저 인터페이스(UI): 주소창, 뒤로 앞으로 버튼 등
- 브라우저 엔진: UI와 렌더링 엔진 사이에서 중간매체 역할 수행
- 렌더링 엔진: 웹서버로부터 응답 받은 내용을 UI상에 나타내줌
- UI 백엔드 : 웹서버와 통신이 가능하게하는 네트워크 ,UI 구동이 가능하게 해줌
- 자바스크립트 인터프리터:자바스크립트 코드를 파싱 후 실행
- 데이터 스토리지: 쿠키와같은 로컬데이터를 저장
렌더링엔진:
- 사용자가 요청해서 웹서버가 응답한 HTML 문서를 HTML과 CSS로 파싱해서 화면을 구성시킴
- 여러개의 인스턴트 한번에 구동 가능 ex) IE -> Trident / FireFox -> Gecko / Safari -> Webkit
렌더링 엔진 작동방식
렌더링 엔진은 웹서버로부터 전달받은 HTML 문서를 맨 처음 네트워크 레이어에서 불러옵니다.
기본적으로 아래와 같은 기본적인 Flow 를 거칩니다.
HTML 파싱 후 DOM 트리 만들기 > 랜더 트리(Render Tree) 만들기 > 렌더 트리(Render Tree) 레이아웃 만들기 > 렌더 트리 페인팅 (Renter Tree Painting)
1. HTML 파싱 후 DOM 트리 만들기
<html>
<body>
<p>돔 트리</p>
</body>
</html>- 렌더링 엔진은 우선 네트워크 레이어를 통해 전달받은 HTML 문서 (Source code)를 파싱하여 각 요소들을 DOM Tree 의 각 DOM 노드들로 전환함.
- DOM은 Document Object Model의 준말로 마크업 형태의 HTML 문서를 오브젝트 모델의 형태로 바꾸어 놓은것임
2.렌더트리 만들기
- HTML 문서들을 파싱하여 DOM Tree를 구성한 후, 렌더링 엔진은 CSS/Style 데이터를 파싱하고 그 스타일 데이터들로 렌더 트리(Render Tree)를 만듭니다.
- DOM 트리(DOM Tree)가 웹 상에 나타날 내용(Contents)를 구성한다면 렌더 트리(Render Tree)는 시각적 요소, 어떻게 나타날지 그 스타일을 지정하는데 렌더 트리는 색상, 차원 등 시각적 지침들을 담은 정사각형들로 구성되고 그 정사각형들은 스크린에 맞는 순서대로 정렬하게 됩니다.
- 렌더 트리(Render Tree) 각각의 정사각형에 해당하는 렌더러 들은 DOM 트리 요소들에 적용되지만 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. 아직 위치와 크기가 정해지지않은 이 렌더트리를 각 노드의 화면에 그리면 화면에 콘텐츠가 표현됩니다
'지식' 카테고리의 다른 글
| [지식]class 와 id의 차이 (0) | 2024.06.28 |
|---|---|
| [지식]CORS원인 및 에러 해결 (1) | 2024.05.01 |
| [지식] attribute 와 property 의 차이 (0) | 2024.04.15 |
| [지식] 렌더링과 DOM(Document Object Model) (0) | 2024.03.24 |
| CSR(Client Side Rendering)과 SSR(Server Side Rendering) (0) | 2024.02.19 |