오늘은 웹브라우저는 어떻게 작동하는지 알아보도록 하자
웹브라우저
브라우저는 동기(Synchronous)적으로 HTML+CSS, JS를 해석한 내용을 화면에 보여주는 응용 소프트웨어이다.
브라우저의 구조는 아래와 같다.
이미지 출처: https://d2.naver.com/helloworld/59361
-
사용자 인터페이스
: 사용자가 접근 가능한 부분이다. 주소 표시줄, 이전/다음 페이지 등과 같은 브라우저에서 요청한 페이지를 제외한 나머지 모든 부분입니다. -
브라우저 엔진
: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. Data Storage를 참고하여 로컬에 데이터를 읽고쓰는 작업을 한다. -
*렌더링 엔진
: 웹 서버로부터 응답 받은 자원을 웹 브라우저 상에 나타낸다. 서버로 부터 HTML 응답을 받으면 렌더링 엔진의 HTML 파서 CSS 파서에 의해 DOM과 CSSOM으로 변환되어 렌더 트리로 결합한다. 이후 렌더 트리를 기반으로 브라우저는 웹 페이지를 나타낸다. -
통신
: HTTP 요청과 같은 서버와 통신이 가능하게 하는 네트워크 호출에 사용된다. -
자바스크립트 해석기
: 자바스크립트 코드를 해석하고 실행한다. -
자료 저장소
Cookie, Local Storage 등 브라우저 메모리를 활용하여 저장하는 영역이다.
이 중 렌더링 엔진을 중점적으로 이야기해보도록 하자.
이미지출처: https://d2.naver.com/helloworld/59361
렌더링 엔진의 동작 과정은 위의 사진과 같다. 첫번째로, 렌더링 엔진은 HTML 문서를 파싱하여 DOM(Document Object Model)과 파싱한 HTML 데이터에서 나온 CSS를 파싱하여 CSSOM(CSS Object Model)을 구축한다. 이를 합쳐, 렌더 트리를 구축한다. 렌더 트리의 각 노드에 대해 배치할 곳을 결저하고 이를 UI 백엔드에서 그리는 식으로 동작한다. JS의 경우, 렌더링 엔진이 아닌 자바스크립트 엔진을 통해서 동작한다.
Additional Information
- 렌더트리란?
: 렌더 트리는 문서를 시각적인 구성 요소로 만들어 주는 역할을 한다. 이러한 렌더 트리는 위치와 크기를 가지고 있지 않아, 렌더 트리 배치에서 position과 size를 결정받아 최종적으로 객체들을 배치한다.
이미지 출처:https://bbangson.tistory.com/87
- 자바스크립트 엔진 이란?
: HTML 파서는 JS로 적힌<script>...</script>를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 Javascript 파일을 로드하고 파싱하여 실행한다.. 이후 파싱을 마치면, HTML 파서가 중지되었던 시점으로 돌아가 DOM 생성을 재개한다. Javascript 코드 완성전에 DOM을 조작하면 오류가 나기 때문에 Javascript 코드를<body>태그 하단에 위치시킨다.
이미지 출처: http://poiemaweb.com/js-broswer
