웹 브라우저란?
- 동기적으로 HTML, CSS, Javascript를 해석하여 내용을 화면에 보여주는 응용 소프트웨어
- 웹 서버에서 양방향으로 통신을 하며 HTML 문서, 멀티미디어 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램
- 브라우저는 페이지를 다운로드하기 위해 응용 계층의 HTTP 프로토콜을 이용해 데이터를 송·수신한다.
- 웹 브라우저가 웹 서버에 필요한 자원을 요청하면 서버는 응답하고 웹 브라우저는 이를 해석한 후 클라이언트에게 보여준다.
- 보통 자원은 웹 페이지처럼 HTML 문서지만 PDF, 이미지 등 다양한 형태일 수 있다.
브라우저의 기본 요소
사용자 인터페이스
- 사용자가 사용하는 화면의 구성
- 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이 해당된다.
브라우저 엔진
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
- HTML 문서와 기타 지원의 웹페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료구조를 구현한다.
- 웹 브라우저마다 전용 브라우저 엔진을 사용한다.
- 레이아웃 엔진(Layout Engine)이라고도 부른다.
- 렌더링 엔진과 밀접하게 연관이 있어서 브라우저 엔진과 렌더링 엔진을 묶어 브라우저 엔진이라고 부르기도 한다.
렌더링 엔진
- 요청한 콘텐츠를 화면에 표시하는 역할
- HTML 및 XML 문서와 이미지를 표시할 수 있다.
- 플러그인이나 브라우저 확장 기능을 이용하면 PDF와 같은 다른 유형도 표시할 수 있다.
- 각 브라우저마다 렌더링 엔진이 다르기 때문에 같은 페이지가 다르게 보이는 경우가 있다.
- 예시로 아래와 같이 렌더링 엔진이 달라도 같은 화면이 적용되도록 작성하는 CSS 속성이 있다.
border-radius: 1em; /* 일반적인 css */
-moz-border-radius: 1em; /* 파이어폭스 브라우저에 적용 */
-ms-border-radius: 1em; /* 익스플로어에 적용, 보통 생략 */
-o-border-radius: 1em; /* 오페라에 적용 */
-webkit-border-radius: 1em; /* 구글, 사파리 브라우저에 적용 */렌더링 엔진의 동작 원리
- 렌더링 엔진은 HTML 요소와 CSS를 통해
flowchart TD
A[HTML 파싱을 통한 DOM 트리 구축] --> B[CSSOM을 생성]
B --> C[렌더 트리 생성]
C --> D[렌더 트리 배치]
D --> E[렌더 트리 그리기]
- HTML 파싱을 통한 DOM 트리 구축
- HTML 문서를 파싱해서 DOM(Document Object Model) 트리를 구축하는 과정이다.
- DOM 트리는 해당 HTML 문서가 어떤 요소로 이루어져 있는지 정의한 트리를 의미한다.
트리의 각 요소는 마크업과 1:1로 매칭된다.
- 만약 아래와 같은 HTML 문서가 있다고 가정해본다.
<html>
<body>
<p>Hello World</p>
<div>
<img src="example.png" />
</div>
</body>
</html>- 그렇다면 해당 코드를 파싱하면 아래와 같은 DOM 트리가 된다.
flowchart TD A[HTMLHtmlElement] --> B[HTMLBodyElement] B --> C1[HTMLParagraphElement] B --> C2[HTMLDivElement] C1 --> D1[Text] C2 --> D2[HTMLImageElement]
- CSSOM을 생성
- CSS 파일이나 인라인 CSS 등의 정의된 CSS들을 CSS 규칙 객체(CSSOM, CSS Object Model)로 파싱하는 과정이다.
- 정의된 CSS들은 스타일시트 객체로 파싱된다.
- 파싱된 각 객체들은 CSS 규칙을 포함한다.
p,div,.error같이 각 HTML 요소를 인지하는 방법을 나타내는 것을선택자라고 표현한다.margin-top,3px,color,red같이 각 HTML 요소에 대해서 작성할 스타일에 대한 속성과 값을 합쳐서선언이라고 표현한다.- CSS 규칙은
선택자와선언을 포함한다.
- 렌더 트리 생성
- DOM과 CSSOM을 결합해서 렌더 트리를 생성하는 과정이다.
- 이 과정을 Attachment라고 부른다.
- 렌더 트리는 화면에서 보여질 HTML의 각 요소가 그려질 순서와 각 요소가 가지게될 스타일을 매칭한다.
- 화면에 보여지는 걸 기준으로 삼기 때문에
<head>태그나style="display: none;"이 적용되는 등
화면에 보여지지 않는 요소들은 렌더 트리에 포함되지 않는다.
- 렌더 트리 배치
- 렌더 트리가 생성되면, 기기의 뷰포트 내에서 렌더 트리의 노드가 가져야할 정확한 위치와 크기를 계산한다.
- 렌더 트리는 위치와 크기를 가지고 있지 않기 때문이다.
- 이 과정에서 모든 상대적인 값이 픽셀값으로 변환된다.
- CSS에 상대적인 값인
%,rem,vh등으로 할당된 값들은 절대적인 값인px단위로 변환 된다.- 이 과정을
배치(Layout)또는Reflow라고 부른다.
- 이 과정을
- 렌더 트리 그리기
- 렌더 트리의 각 노드를
Painting이라는 과정을 거쳐서 화면의 실제 픽셀로 나타낸다. Painting과정이 끝나면 브라우저 화면에 UI가 나타나게 된다.- 특정 액션이나 이벤트에 따라 HTML요소의 크기나 위치 등의 레이아웃 수치가 변하면,
해당 요소의 영향을 받는 자식 노드나 부모 노드들을 포함하여 렌더 트리가 재배치된다.- 재배치 되는 과정에서 크기와 위치를 재계산하는 과정을
Reflow, 다시 화면에 그려주는 과정을Repaint라고 부른다.
- 재배치 되는 과정에서 크기와 위치를 재계산하는 과정을
통신
- HTTP 요청과 같은 네트워크 호출을 의미한다.
- 플랫폼 독립적인 인터페이스다.
- 각 플랫폼 하부에서 실행된다.
자바스크립트 해석기
- 자바스크립트 코드를 해석하고 실행하는 역할
- 자바스크립트는 코드를 위에서 아래로 한 줄씩 읽어나가며 해석하는 인터프린터 언어이기 때문에 해석기가 필요하다.
- 웹 브라우저마다 전용 자바스크립트 엔진이 탑재되어 있다.
- 자바스크립트 엔진이라고도 부른다.
- 렌더링 엔진이 HTML 문서를 파싱하는 도중에
<script>태그를 만나면,
자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고
자바스크립트 엔진으로 권한을 넘긴다. - 제어 권한을 넘겨받은 자바스크립트 엔진은
<script>태그 내의 자바스크립트 코드 또는 src 속성에 정의된 자바스크립트 파일을 로드하고 파싱 하여 실행한다. - 자바스크립트의 실행이 완료되면, 다시 HTML 파서로 제어 권한을 넘겨서 중지했던 시점으로 돌아가 DOM 생성을 재개한다.
- 렌더링 엔진가 만약 자바스크립트 엔진에 제어 권한을 넘긴 상태라면 DOM 트리는 아직 구축되는 도중이다.
- 그래서 아직 DOM 트리에 아직 구현되지 않은 HTML 요소에 대해서 이벤트를 호출하게 되면 오류가 발생한다.
UI 백엔드
- 렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할
- Input, Select, Button같은 기본적인 위젯을 그려준다.
- 플랫폼에서 명시하지 않은 일반적인 인터페이스다.
- OS 사용자 인터페이스 체계를 사용한다.
자료 저장소
- 브라우저가 자료를 저장하는 계층
- 쿠키, 로컬 스토리지, 세션 스토리지, 인덱스 DB 등 브라우저 메모리를 활용하여 데이터를 클라이언트 측에 저장한다.