※ 네이버 부스트코스 웹 프로그래밍(풀스택) > 4) browser의 동작-1~2을 공부하며 정리한 내용입니다.
브라우저 컴포넌트
- 사용자 인터페이스(UI) = 화면에 보이는 것들(닫기/뒤로 가기 버튼 등)
- 브라우저 엔진 = 브라우저 소프트웨어를 동작시켜주는 핵심 엔진. 브라우저도 데이터 일부를 캐시하고 저장함. 이런 데이터를 관리하는 영역. 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어함.
- 렌더링 엔진 = 화면에 직접 위치를 잡고 색칠을 해주는 엔진. 파이어폭스의 Gecko, 사파리의 WebKit 등 렌더링 엔진은 브라우저별로 다르다.
- 통신 : 특정 인터넷 주소를 해석하고, 통신하는 네트워킹 모듈
- 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행해줌
- UI 백엔드 : UI 영역을 처리할 수 있는 백엔드 영역
브라우저 엔진의 메인 플로우
- HTML을 파싱(문자 단위로 해석)하여 트리 형태의 DOM(Document Object Model)으로 만듦
- HTML과 CSS를 파싱한 것을 합쳐 렌더 트리를 만듦
- 렌더 트리를 기준으로 화면에 어떻게 매칭할지 결정
- 결정 후 화면에 직접 그림을 그림
파싱
2 + 3 -1 이라는 수학식을 파싱한다면 숫자와 기호를 나누어 위 그림과 같은 트리 형태로 만들 수 있음.
나뉜 하나하나를 토큰이라고도 함.
파싱이란 토큰 단위로 잘라서 의미를 해석하고, 그 의미에 따라 실행해주는 것.
<html>
<body>
<p>Hello World</p>
<div><img src="example.png" /></div>
</body>
</html> HTML은 위와 같이 꺽쇠로 짜여진 것으로, 이를 마크업이라고 하며, 브라우저에서는 아래 DOM 트리의 형태로 변환하여 처리함.
CSS 파싱
CSS는 {} 중괄호를 통해 key와 value값을 지정할 수 있음.
그림 좌측 p, div, .error 와 같은 것을 selector라고 함.
렌더 트리
