[브라우저 동작원리]
브라우저가 어떻게 우리에게 화면을 렌더링 해줄까??
우리가 흔히 아는 브라우저로는 대표적으로 애플의 Safari, 구글의 Chrome, 마이크로소프트의 IE(지금은 사망), Edge 등 있지만 firefox, Opera, Dolphin 등이 있다.
기본적으로 브라우저의 기본 구조는 위의 사진과 같다.
1. 사용자 인터페이스(User Interface)
-
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등..
-
요청한 페이지를 보여주는 창을 제외한 부분을 보여준다.
2. 브라우저 엔진(Browser Engine)
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
3. 렌더링 엔진(Rendering Engine)
-
요청한 컨텐츠를 표시한다.
-
HTML을 요청할 경우 HTML과 CSS를 파싱(해석)하여 화면에 표시한다.
4-1. 통신(Netwroking)
-
HTTP 요청과 네트워크 호출에 사용한다.
-
플랫폼의 독립적인 기능이고, 각 플랫폼의 하부에서 실행된다.
4-2. 자바스크립트 해석기(JavaScript Interpreter)
- 자바스크립트 코드를 해석하고 실행한다.
4-3. UI 백엔드(UI Backend)
- 콤보 박스나 글 입력 폼등 기본적인 장치를 그린다.
5. 자료 저장소 (Data Persistence)
-
자료를 저장하는 계층으로 쿠키나 로컬 스토리지등의 자료가 저장된다.
-
주로 하드디스크에 저장되며 HTML 명세 등도 이곳에 저장된다.
브라우저는 기본적으로 사용자가 보고 싶어 하는 페이지를 서버에 요청(Request)하고 서버로 부터 응답(Response)를 받아서 브라우저에 표시한다.
여기서 브라우저는 서버로 부터 HTML,CSS,JS,이미지 파일 등등 모든것들을 응답 받는다. HTML은 HTML Parser를 통해 HTML 구문분석을 하며 DOMTree를 생성하며 CSS는 CSS Parser를 통해 CSSDOMTree로 변환 하여 RenderTree로 결합시킨다.
반면 자바스크립트(JavaScript)는 렌더링 엔진이 아닌 자바스크립트 엔진(대표적으로 크롬 V8, Webkit) 으로 처리한다. HTML Parser는
자바스크립트 실행이 모두 완료되면 HTML Parser로 권한을 넘겨서 브라우저가 중지했던 시점부터 DOM생성을 재개한다.
브라우저는 자바스크립트 실행이 될때 제어권을 자바스크립트 엔진에게 넘기고 자바스크립트 엔진이 실행 완료가 되면 다시 제어권을 가져온다.
이부분이 매우 중요한듯 하다.
