[ WEB ] 브라우저 작동 원리

1. 브라우저의 기본 구조

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

사용자 인터페이스 

요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분들

( 앞으로 가기, 뒤로가기, 즐겨찾기 등과 같은 사용자가 브라우저에서 직접 조작할 수 있는 영역! )

 

브라우저 엔진 

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. 

사용자 인터페이스가 렌더링 엔진에 쿼리를 전달 할 수 있도록 조작하는일을 한다.

 

렌더링 엔진 

HTML과 CSS문서를 파싱 및 해석하여 화면에 표시해준다.

 

통신

HTTP 요청과 같은 네트워크 호출에 사용된다.

 

자바스크립트 해석기

자바스크립트 코드를 해석하고 실행한다.

 

UI 백엔드

기본적인 위젯을 그리는 인터페이스 

 

자료저장소 

cookie나 local storage등 모든 자료를 저장하는 영역이다.

 

브라우저는 서버로 부터 html문서를 다운받는다.
렌더링 엔진이 html문서를 파싱해 렌더링 트리를 생성하고 렌더링 트리가 만들어지면 UI 백엔드에서 각 노드를 확인하며 화면에 그리기 시작한다. 

 2. 렌더링 엔진의 동작 과정 

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

1. 다운받은 문서를 파싱한다.

2. HTML을 파싱하여 DOM 트리가 만들어지고 CSS를 파싱하여 CSSOM 트리가 생성됨. 

3. DOM 트리와 CSSOM트리가 결합하여 렌더링 트리가 만들어진다.

4. 렌더링 트리에서 레이아웃을 실행하고 UI백엔드가 화면에 그려준다. 

 

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

DOM : HTML을 파싱하여 자료를 구조화 한 것
CSSOM : CSS를 파싱하여 자료를 구조화 한 것

 

3. HTML 렌더링 중 스크립트를 만날 경우

렌더링 과정 중 <script>태그를 만나게 되면 진행중이던 HTML파싱을 중지하고 자바스크립트 엔진으로 권한을 넘긴다. 

자바스크립트 파싱이 종료되면 다시 렌더링 엔진으로 돌아가 HTML파싱이 중단된 시점부터 다시 파싱을 시작하게 된다.

 

 

 

---

[ 출처 ]

 

Website는 어떻게 보여주게 될까? — (2)

 

HTML렌더링 중 자바스크립트를 만난다면?