# 브라우저

브라우저는 웹에 접속하고 사용하기 위한 소프트웨어

<br>

## 주요 기능

***

컨텐츠를 서버에 요청하고 요청받은 컨텐츠를 브라우저에 표시하는 것

브라우저는 html과 css명세에 따라 파일을 해석해서 표시. *(명세는 W3C가 정한다.)*

<br>

## 구성 요소

***

* 사용자 인터페이스 : 페이지(컨텐츠)를 제외한 나머지 모든 부분 ( 뒤로가기, 북마크, 새로고침 등)
* 렌더링 엔진 : 요청한 컨텐츠를 표시해주기 위한 s/w로 html내의 css,js등을 파싱하여 화면에 표시

  `firefox`는 `게코(Gecko)`엔진을 `크롬`과 `사파리`는 `웹킷(Webkit)`엔진을 사용한다.

  엔진마다 동작과정은 조금씩 다르다.
* 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 동작을 제어
* UI 백엔드 : 콤보박스, 버튼, 창 같은 기본적인 장치를 그리는 부분
* 자바스크립트 해석기 : js 코드를 해석하고 실행
* 자료 저장소 : 자료를 저장하는 계층으로 쿠키와 같은 모든 종류의 자원을 저장

<br>

## 동작과정

***

1. 렌더링 엔진이 html문서를 파싱하여 내부에서 태그를 DOM(Document Object Model)노드로 변환하여 `DOM 트리`를 구축한다.

   `DOM`은 html,xml 문서의 프로그래밍 인터페이스로 문서의 구조화된 표현을 제공하여 프로그래밍 언어가 DOM구조에 접근 할 수 있게해서 내용 변경을 가능하게 한다.

   한마디로 웹페이지를 스크립트, 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
2. 외부 css파일을 이용하여 스타일 요소도 파싱해 `렌더 트리`를 생성한다.
3. 각 노드들이 화면의 어디에 표시할지 배치한다. (렌더 트리 배치)
4. `UI 백엔드`에서 렌더 트리의 노드를 다니면서 실제로 형상을 만들어내는 과정. (그리는 과정)

<br>

## 파싱

***

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환 하는 것

파싱 결과는 트리구조로 `파싱 트리` or `문법 트리`라고 한다.

* `문맥 자유 문법` : 파싱할 수 있는 모든 형식은 정해진 용어와 구뮨 규칙에 따라야 하는 것

<br>

### 하는 역할

* 어휘 분석 : 자료를 토큰으로 분해하는 과정

  공백과 줄 바꿈 같은 의미없는 문자는 제거
* 구문 분석 : 언어의 구문 규칙을 적용하는 과정

-> 어휘 분석기와 구문 분석을 통해 `파싱 트리` 구성

* 변환 : 파싱트리의 문서를 다른 양식으로 변환하는 컴파일의 기능을 수행한다.

-> 변환을 통해 파싱트리는 `기계 코드`가 된다.

<br>

### 파서 종류

* 하향식 파서 : 구문의 상위 구조부터 일치하는 부분을 찾는 것
* 상향식 파서 : 낮은 수준의 규칙 에서 높은 수준으로 찾는 것

<br>

### HTML 파서

HTML 마크업을 파싱 트리로 변환

* **문맥 자유 문법**이 아니기 때문에 일반적인 파서는 HTML에 사용할 수 없으나 CSS와 js를 파싱하는데 사용된다.

  HTML은 암묵적으로 태그가 생략이 가능한 것과 같이 유연한 문법이기 때문에 일반적인 파서로 파싱하기 어렵다.

  또, HTML 오류에 대한 브라우저의 관용과 실제 HTML내부값은 입력과정에서 변경이 될 수 있어 재파싱이 이루어지기 때문에 파싱이 어렵다.

`토큰화` 와 `트리구축` 두단계로 파싱 알고리즘을 수행한다.\
자세한 내용은 reference를 참조하자

파서는 유연한 문법인 HTML문서를 다루는 만큼 왠만한 오류를 자체적으로 처리해준다.

<br>

### 스크립트

웹은 파싱과 실행이 동시에 수행되는 동기화 모델로 스크립트가 실행되는 동안 문서의 파싱은 중단된다.

스크립트를 `지연(defer)`로 표시하면 문서 파싱은 중단되지 않고 문서파싱 완료 후 스크립트 실행

* 예측 파싱 : 스크립트를 실행하는 동안 다른 스레드가 문서 나머지 부분을 파싱하여 병렬로 처리하는 것.

  외부 스크립트,스타일 시트와 같이 외부 자원을 파싱
* 스타일 시트 : DOM트리를 변경하지 않기 때문에 문서파싱을 기다리거나 중단하지 않으나 스크립트가 문서를 파싱하는 동안 스타일 정보를 요청하는 경우에는 문제가 생기기 때문에 `개코`는 파싱중인 스타일시트가 있을때 모든 스크립트 실행을 중단 시키고 `웹킷`은 문제가 될만한 속성이 있을때만 스크립트를 중단시킨다.

<br>

## DOM트리와 렌더트리의 관계

렌더러는 DOM요소에 부합하지만 1:1 대응 관계는 아니다.

`head`와 같은 비시각적 DOM요소는 렌더 트리에 추가 되지않고 `selct`와 같은 DOM요소는 `표시영역`,`드롭다운 목록`,`버튼`과 같이 여러개의 렌더러가 존재하는 것처럼 말이다.

<br>

## 렌더링 엔진은 통신을 제외한 대부분의 경우에 단일 스레드로 동작

\ <br>

***

## Refrerence

<https://d2.naver.com/helloworld/59361>