목적 :
브라우저 렌더링 방식을 이해하기 위해
웹 브라우저가 하는일?
HTML CSS JS 로 만든 코드를 가지고 웹 페이지를 그려줌
|
웹 브라우저의 구조
|
User Interface
주소 표시줄, 이전/다음/새로고침 버튼 등
웹 페이지를 제외하고 사용자와 상호작용 하는 사용자 인터페이스
Rendering Engine
HTML 과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진
Browser Engine
유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진
Networking
각종 네트워크 요청을 수행하는 네트워킹 파트
UI Backend
체크박스나 버튼과 같은 기본적인 위젯을 그려주는 UI 백엔드 파트
Data Persistence
localStorage나 Cookie와 같이 보조 기억장치에 데이터를 저장하는 파트
Javascript Interpreter
자바스크립트 코드를 실행하는 인터프리터
렌더링 엔진 (레이아웃 엔진)이란 ?
내용정보인 HTML,XML과 서식정보인 CSS, XML 등을 읽어 들여 사람이 읽을 수 있는 문서로
표시하는, 웹 브라우저의 핵심기능을 담당하는 소프트웨어
|
렌더링 엔진의 목표
|
1. HTML, CSS ,JS, 이미지 등
웹 페이지에 포함된 모든 요소들을 화면에 보여준다
2. 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록
자료 구조를 생성한다.
렌더링 엔진의 동작 과정
DOM Tree 의 생성
CSSOM Tree 생성
Render Tree -> 배치 (Layout) -> 생성
화면에 표시되어야 할 모든 노드의 컨텐츠 (meta,display none 속성은 랜더 관계 x 랜더트리에 포함 x)
