브라우저란?
웹 브라우저는 인터넷을 검색할 때 문서나 영상, 음성 따위의 정보를 얻기 위하여 사용하는 프로그램
웹 브라우저의 종류는 다양한데 크롬, 네이버 웨일, 파이어 폭스, 사파리, 엣지 등이 있다.
브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 이지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI (Uniform Resource Identifier)에 의해 정해진다.
브라우저의 기본 구조
1. 사용자 인터페이스: 사용자가 접근할 수 있는 영역으로, URI를 입력할 수 있는 주소 표시줄, 이전/다음 버튼, 북마크 메뉴, 새로 고침 버튼, 현재 문서의 로드를 중단할 수 있는 정지 버튼, 홈 버튼 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
2. 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어, Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 함
3. 렌더링 엔진: 웹 서버로부터 응답 받은 자원을 웹 브라우저 상에 나타냄, 예를 들어 HTML 문서를 응답 받으면 HTML과 CSS를 파싱하여 화면에 표시함, 문서를 응답 받으면 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합함, 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지 나타냄
// Parsing (파싱) : 문장이 이루고 있는 구성 성분을 분해하고 분해된 성분의 위계 관계를 분석하여 구조를 결정하는 것
// Render Tree (렌더 트리): 문서를 시각적인 구성 요소로 만들어주는 역할
4. 통신: 서버와 통신이 가능하게 하는 네트워크 호출에 사용
5: UI 백엔드: select, input 등 기본적인 위젯을 그리는 인터페이스
6. 자바스크립트 해석기: 자바스크립트 코드 해석하고 실행
7. 자료 저장소: Cookie, Local Storage, Indexed DB 등 브라우저 메모리를 활용하여 저장하는 영역임
렌더링 엔진과 동작 과정
렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일
렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다. 물론 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다.
렌더링 엔진은 서버로부터 응답받은 HTML 문서를 얻는 것으로 시작한다.
① 렌더링 엔진은 HTML 문서를 파싱하여 DOM 트리를 구축한다.
② 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱한다.
③ DOM 트리와 ②의 결과물을 합쳐 렌더 트리를 구축한다.
④ 렌더 트리 각 노드에 대해 화면 상에서 배치할 곳을 결정한다.
⑤ UI 백엔드에서 렌더 트리의 각 노드를 그린다.
① HTML 문서를 파싱하여 DOM (Document Object Model) 트리를 구축한다.
<html>
<body>
<p>Hello World</p>
<div><img src="example.png" /></div>
</body>
</html>아래와 같은 DOM 트리로 변환 가능
브라우저는 서버로부터 HTML 문서를 모두 전달받고, HTML 파서를 통하여 파싱하고, 파싱 트리를 생성한다. 생성된 파싱 트리를 기반으로 DOM 트리를 생성한다.
// Parsing (파싱) : 문장이 이루고 있는 구성 성분을 분해하고 분해된 성분의 위계 관계를 분석하여 구조를 결정하는 것
② CSSOM (Css Object Model)을 생성한다.
CSS 파일은 스타일 시트 객체로 파싱 되고 각 객체는 CSS 규칙을 포함한다.
CSS 규칙 객체(CSSOM)는 선택자와 선언 객체 그리고 CSS 문법과 일치하는 다른 객체를 포함한다.
③ DOM 트리와 ②의 결과물을 합쳐 렌더 트리를 구축한다.
DOM 트리가 구축되는 동안, 브라우저는 DOM 트리를 기반으로 렌더 트리를 생성한다.
렌더 트리는 문서를 시각적인 구성 요소로 만들어주는 역할을 한다.
웹킷은 이 구성 요소를 렌더러(rendere) 또는 렌더 객체 (render object) 라는 용어를 사용한다.
렌더러는 자신과 자식 요소를 어떻게 배치하고 그려내야 하는지 알고 있다.
렌더러는 DOM 요소에 부합하지만 1:1로 대응하는 관계는 아니다. <head>, display:'none' 과 같은 사용자가 볼 수 없는 DOM 요소는 렌더 트리에 추가되지 않는다.
④ 렌더 트리를 배치한다. (레이아웃)
렌더트리는 위치와 크기를 가지고 있지 않으므로 어느 공간에 위치할지 각 객체들에게 위치(position)와 크기(size)를 결정해야 한다.
렌더 트리란?
DOM과 CSSOM은 독립적인 개체다. DOM은 콘텐츠, CSSOM은 문서의 스타일 규칙을 설명한다.
브라우저가 이 두가지를 병합하여 화면에 픽셀을 렌더링 하기 위한 마지막 단계가 렌더 트리다.
렌더 트리는 DOM과 CSSOM을 합한 후 최종적으로 브라우저에 표기될 것들만 렌더 트리에 선별 되어 생성 된다. 이 렌더 트리는 표시되는 각 요소의 레이아웃을 계산하는 데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리된다. 최적의 렌더링 성능을 얻기 위해 이러한 단계를 이해하고 각각을 최적화하는 것이 중요하다.
브라우저가 렌더 트리를 생성하기 위해 하는 작업은 다음과 같다.
1. DOM 트리의 루트에서 시작해서 노드 각각을 읽으며 표시한다.
- 메타 태그나 스크립트 태그 등의 노드는 표시되지 않는다. (사용자에게 보이지않아도 되는 내용은 렌더링 출력에 반영되지 않음)
- 일부 노드는 CSS를 통해 숨겨지며 렌더 트리에서도 생략된다. (예를 들어 span 노드에 display : none 속성을 설정하면 렌더 트리에서 누락됨)
2. 표시된 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용한다.
3. 표시된 노드를 콘텐츠 및 계산된 스타일과 함께 내보낸다.
출처
- https://bbangson.tistory.com/87 - 브라우저란?
- https://d2.naver.com/helloworld/59361 - 브라우저의 주요 구성 요소
- https://kingpodo.tistory.com/8 - 파싱이란?
- https://onlydev.tistory.com/9 - 렌더 트리란?
'Backend Loadmap > Internet' 카테고리의 다른 글
| [백엔드 로드맵][인터넷] 호스팅은 무엇일까요? (0) | 2022.12.02 |
|---|---|
| [백엔드 로드맵][인터넷] 도메인 네임이란? (0) | 2022.11.28 |
| [백엔드 로드맵][인터넷] DNS와 작동 원리 (0) | 2022.11.24 |
| [백엔드 로드맵][인터넷] HTTPS란? (0) | 2022.11.22 |
| [백엔드 로드맵][인터넷] 인터넷은 어떻게 작동될까요? (0) | 2022.11.22 |