브라우저 동작원리
브라우저
- 사용자가 서버에 요청하여 전송받은 데이터를 표시
브라우저 구조
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 : 쿠키나 다른 데이터 등을 저장 할 때 사용.
렌더링 엔진 동작과정
- HTML을 파싱하고 element를 content tree의 DOM nodes로 변환.
- CSS file이나 style elements의 정보도 변환하여 render tree 생성.
- layout 과정을 통해 각 node 알맞은 위치에 표시.
- UI background layer 통해 각각의 노드 그려짐
점진적으로 진행되는 과정이기 때문에 처리 될 때마다 화면에 표시되어 한꺼번에 표시되지 않을 수 있음.