브라우저 동작원리

브라우저

 - 사용자가 서버에 요청하여 전송받은 데이터를 표시

 

브라우저 구조

브라우저 구조 (https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)

1. UI : 주소창, 버튼 등 요청한 페이지 제외 다른 모든 부분.

2. Browser Engine : UI와 렌더링 엔진 사이의 동작 제어.

3. Rendering Engine : 요청한 콘텐츠 (ex> HTML, CSS) 파싱하여 화면에 표시.

4. Networking : HTTP 요청 등 네트워크 호출에 사용. 플랫폼 독립적 인터페이스.

5. UI Backend : 기본적인 위젯이나 콤보 박스, 창 등을 그리는데 사용. OS의 UI 메서드 사용.

6. JavaScript Interpreter : 자바스크립트 코드를 파싱하고, 실행.

7. Data storage : 쿠키나 다른 데이터 등을 저장 할 때 사용.

 

렌더링 엔진 동작과정

렌더링 엔진 동작 (https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)

- HTML을 파싱하고 element를 content tree의 DOM nodes로 변환.

- CSS file이나 style elements의 정보도 변환하여 render tree 생성.

- layout 과정을 통해 각 node 알맞은 위치에 표시.

- UI background layer 통해 각각의 노드 그려짐

 

점진적으로 진행되는 과정이기 때문에 처리 될 때마다 화면에 표시되어 한꺼번에 표시되지 않을 수 있음.