백엔드 개발자 -3

오늘은 브라우저와 브라우저의 작동원리에 대해 알아보겠다.

브라우저란 ?

웹 서버에서 쌍방향 통신을 하며 리소스를 받아와 출력하는 그래픽 인터페이스 기반의 응용 소프트웨어이다.

브라우저의 기본구조

웹 브라우저의 구조, 출처= https://d2.naver.com/helloworld/59361 

1. 사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 등 페이지 뷰 이외의 모든 부분
2. 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
3. 렌더링 엔진: 요청한 HTML, CSS 문서를 파싱해 페이뷰에 표시
4. 통 신: HTTP요청과 같은 네트워크 호출에 사용된다.
5. JS 엔진: 자바스크립트 코드를 해석하고 실행한다.
6. UI 백엔드: 기본적인 위젯을 그림
7. 자료 저장소: 쿠키,인덱스 데이터베이스등 브라우저 메모리를 활용하고 저장하는 웹 데이터베이스

렌더링 엔진

렌더링 엔진은 브라우저마다 사용되는 엔진이 다르다.
Blink - 크롬, 오페라
Webkit - 사파리
Trident - 익스플로어
EdgeHTML - 마이크로소프트 엣지
Trident - IE

렌더링 엔진 동작 과정

1.HTML을 파싱하여 DOM 노드를 만들고 병합하여 DOM 트리를 만든다.

DOM이란 Document Object Model의 약자로 문서객체모델이다. 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 하는 인터페이스이다.

위와 같이 HTML를 분석하여 노드를 만들고 트리로 만들다.

2.CSS을 파싱하여 CSSOM을 생성합니다.

CSSOM이란 Css Object Model의 약자로 DOM이 HTML이 대상이라면 CSSOM은 CSS가 대상입니다.

3.렌더 트리 구축 (Attachment)

DOM 트리와 CSSOM 트리를 결합하여, DOM트리를 토대로 랜더링 할수 있도록 렌더 트리를 형성한다.

4. 렌더 트리 배치

렌더 트리는 정확한 위치와 크기를 가지고 있지 않기 때문에 객체들에게 위치와 크기(px로 지정)를 결정해줍니다.

5. 렌더 트리 그리기

랜더 트리 구성이 완료되면 UI백엔드에서 형상을 그리는 작업을 시작한다.