1. 웹 브라우저의 구성요소와 동작과정
7가지로 구성된 웹브라우저의 동작 과정을 살펴보면
-
User interface : 사용자에게 브라우저의 화면을 보여주는 부분 (웹 주소를 입력하면 user interface get)
-
Browser engine : 유저가 url을 입력하면 rendering engine으로 보내며 동작을 제어
-
Rendering engine : 요청 받은 주소를 networking 모델로 보내 서버에 요청
-
Networking : 서버에서 받아온 정보를 Rendering engine에게 보냄
-
Rendering engine : 서버로부터 받은 정보가 Js 파일이면 Js engine에게 해석 요청
-
JS engine : 요청 받은 정보를 파싱하여 HTML/CSS로 이루어진 Dom 파일을 Rendering engine에 보냄
-
Rendering engine : 받아온 Dom 파일들 하나하나를 객체화 하여(render object) Render Tree를 만듬
-
UI backend : 입력받은 Render Tree를 통해 UI backend에서 Dom 객체를 화면에 표시
Data storage : 쿠키나 캐쉬파일들을 저장함, 웹브라우저 동작과정에서 페이지 정보들이 쌓이며 이전에 했던 작업은 Data storage에서 꺼내씀 (Brower engine은 사실 Rendering engine에 url를 보내지 않고 Data storage에서 먼저 검색함)
2. Rendering engine process(렌더링 엔진 처리 과정)
과정 설명
HTML/CSS 파싱 => DOM tree 구축 => Render tree 구축 => Render tree 배치 => Render tree 그리기 => Display 출력
-
[1] HTML 문서가오면 파싱하여 Dom Tree에 저장
-
[2] CSS 문서가 오면 파싱하여 Style Rules에 저장
-
[3] 만들어진 Dom Tree와 Style Rules를 합쳐 RenderTree에 저장
-
[4] Render Tree의 (layout)배치를 위한 과정
-
[5] UI backend에 요청하여 화면에 보여줌
