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에서 먼저 검색함)
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에 요청하여 화면에 보여줌