웹 브라우저 동작 과정 2차

프론트엔드 개발관련 공부내용을 기록하는 포스트 입니다.

사용자 인터페이스 : 우리가 브라우저에서 볼수 있는 주소표시줄, 버튼 등 사용자가 컨트롤 할 수 있는 부분
브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어
렌더링 엔진
- 사용자가 요청한 URI 를 브라우저 엔진 으로부터 받아 서버에 요청한다.
- 서버로 URI 요청하여 응답받은 데이터(HTML, CSS , JavaScript) 를 받아서 파싱 후 렌더링한다.(Chrome webkit)
통신 : 렌더링 엔진으로부터 HTTP 요청 등을 받아서 네트워크 처리 후 응답을 전달
자바스크립트 해석기 : JavaScript 를 파싱한다(chrome V8)
자료 저장소 : 쿠키 등의 자료를 컴퓨터 하드디스크에 저장한다. (HTML5 부터 Web Database 에 저장가능)
UI 백엔드 : render tree 를 Browser 에 그리는 역할을 담당

브라우저 주소 표시줄에 URI 입력 후 브라우저 엔진에 전달
브라우저 엔진은 자료 저장소에서 URI 에 해당하는 자료를 찾고, 해당 자료를 쿠키로 저장 후 렌더링 엔진으로 전달
렌더링 엔진은 브라우저 엔진으로부터 받은 자료(HTML, CSS, image 등)를 분석한다. 동시에 URI 데이터를 통신, 자바스크립트 해석기, UI 백엔드로 전파한다.
렌더링 엔진은 통신 레이어에 URI 에 대한 추가 데이터가 있다면 요청하고 응답을 기다린다.
응답받은 데이터에서 HTML ,CSS 는 렌더링 엔진이 파싱한다.
응답받은 데이터에서 JavaScript는 Javascript 해석기가 파싱한다.
JavaScript 해석기는 파싱한 결과를 렌더링 엔진에 전달하여 3번과 5번에서 파싱한 HTML 의 결과인 DOM tree 를 조작한다.
조작이 완료된 DOM node(DOM Tree 구성요소)는 render object(render tree 구성요소) 로 변한다.
UI 백엔드는 render Object 를 브라우저 렌더링 화면에 띄어준다.

렌더링 엔진은 URI 를 통해 요청을 받아서 해당하는 데이터를 렌더링하는 역할을 담당 chrome 과 IOS 는 webkit 이라는 rendering engine 을 사용

DOM tree 구축을 위한 HTML parsing, CSS, Javascript parsing : HTML 문서를 파싱한 후, content tree 내부에서 tag(a, div)를 DOM node 로 변환한다. 그 다음 CSS 파일과 함꼐 모든 스타일 요소를 파싱한다. 스타일 요소와 HTML 표시 규칙, Javascript 의 파싱 결과물은 render tree 를 생성한다
render tree 구축 : HTML 과 CSS 를 파싱해서 만들어진 render tree 는 색상 또는 면적 등 시각적 속성을 갖는 사각형을 포함한다. 정해진 순서대로 렌더링한다
render tree 배치 : render tree 가 생성이 끝나면, 배치가 시작된다. 각 node 가 정확한 위치에 표시되기 위해 이동한다
render tree 그리기 : 각 node 배치를 완료하면 UI 벡엔드에서 각 node를 가로지르며 paint 작업을 한다

You may also enjoy