브라우저 구조와 렌더링 과정

 

브라우저 기본 구조 7가지

 

◎ 사용자 인터페이스

 

주소 표시줄, 이전/다음/새로고침 버튼, 북마크 등 요청한 웹 페이지를 제외하고 사용자와 상호작용 하는 서비스들

 

◎ 브라우저 엔진

 

사용자 인터페이스와 렌더링 엔진을 연결하는 엔진

 

◎ 렌더링 엔진

 

HTML과 CSS를 파싱(코드 분석)하여 요청한 웹 페이지를 표시하는 엔진

 

◎ 통신

 

각종 네트워크 요청을 수행하는 파트

 

◎ 자바스크립트 해석기

 

자바스크립트 코드를 해석하고 실행하는 인터프리터(크롬의 경우 V8엔진)

 

◎ UI 백엔드

 

체크박스나 버튼과 같은 기본적인 위젯을 그려주는 파트

 

◎ 데이터 저장소

 

로컬 스토리지나 쿠기와 같이 보조 기억장치에 데이터를 저장하는 공간

 

 

렌더링 엔진의 목표

 

HTML, CSS, JS, 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여줘야 하고 업데이트가 필요할 때 효율적으로 렌더링을 할 수 있도록 자료 구조를 생성해야 합니다.

 

 

렌더링 엔진의 동작 과정

 

 

1. DOM Tree와 CSSOM Tree 생성
   1. HTML 태그들을 토큰화하고 렉싱(lexical analysis)을 통해 그 토큰을 해당 속성 및 규칙을 정의하는 노드로 만듭니다. 그리고 그 노드들이 연관성을 가질 수 있도록 Tree를 생성하는데 그것이 DOM Tree입니다.
   2. HTML과 비슷하게 CSS 역시 토큰화, 노드 생성을 거쳐 CSSOM Tree를 만듭니다.
2. DOM Tree와 CSSOM Tree를 결합하여 화면에 표시되어야 할 모든 노드의 콘텐츠, 스타일 정보를 포함하는 Render Tree 생성합니다.
3. 배치(Reflow) - 뷰 포트 내에서 요소들의 정확한 위치와 크기를 계산하는 작업을 합니다.
4. 그리기(Paint, Repaint) - 화면에 실제로 그려지는 Render Tree 그립니다.