오늘은 브라우저 동작 방법에 대해 알아본다🌷
브라우저 주요 기능
사용자가 선택한 자원을 서버에 요청하여 브라우저에 표시한다.
자원은 HTML, PDF, image 등 이 있다.
자원의 주소는 URL에 의해 정해진다.
브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시한다.
브라우저 사용자 인터페이스는 서로 닮아 있다. 서로 모방을 하면서 표준 명세 없이도 닮아갔다.
- URL을 입력하는 주소 표시 줄
- 이전버튼, 다음버튼, 새로고침 버튼과 정지버튼
- 홈버튼
- 북마크
브라우저의 기본 구조
- 사용자 인터페이스 : 위에서 말한 요소들이 있다. 즉, 페이지를 보여주는 창을 제외한 브라우저의 모든 요소이다.
- 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진을 제어한다.
- 렌더링 엔진 : 요청한 콘텐츠를 표시한다.
- 통신 : HTTP 요청같이 네트워크 호출에 사용된다. 플랫폼의 독립적인 인터페이스로 각 플랫폼 하부에서 실행된다.
- UI 백엔드 : 기본 장치를 그린다. 플랫폼에서 명시하지 않는 일반적인 인터페이스이다. OS 사용자 인터페이스 체계를 사용한다.
- 자바스크립트 해석기 : 자바스크립트의 코드를 해석하고 실행한다.
- 자료 저장소 : 자료를 저장하는 계층이다. 웹 데이터베이스이다.
렌더링 엔진
렌더링 엔진의 역할은 화면은 브라우저에 랜더링 하는 것이다.
파이어폭스는 직접 제작한 게코를, 사파리와 크롬은 웹킷 엔진을 사용한다.
웹킷은 리눅스 플랫폼에서 동작하기 위해 제작된 오픈소스 엔진이다.
동작 과정
렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻는 것에서 시작된다.
HTML 문서를 파싱하고 테그를 콘텐츠 트리 안에서 DOM 노드로 변환한다.
CSS 파일도 파싱하여 스타일 정보와 HTML 표시 규칙은 렌더 트리를 생성한다.
랜더 트리는 정해진 순서대로 스타일을 화면에 표시한다.
랜더 트리가 생성되면 배치가 시작된다. 노드가 화면에 정확한 위치에 표시된다.
UI 백엔드에서 랜더 트리의 각 노드를 가로지르며 형상을 만들며 그린다.
렌더링 엔진은 HTML 파일이 모두 파싱될 때 까지 기다리지 않는다. 배치와 그리기 과정을 계속 진행한다.
네트워크로부터 나머지 내용이 전송되는 것을 기다리며 동시에 받은 내용을 먼저 화면에 표시한다.
- HTML 마크업을 파싱해서 DOM 트리 생성
- CSS 마크업을 파싱해서 CSSOM 트리 생성
- DOM 트리 + CSSOM 트리 -> 렌더 트리 생성
- 각 노드에 대한 화면의 위키나 크기를 계산해서 렌더 트리 배치
- UI 백엔드에서 렌더 트리의 각 노드를 가로질러서 렌더 트리를 그린다.
DOM (Document Object Model)
웹 페이지의 소스에 있는 테그를 javascript 가 활용할 수 있는 객체로 만든 것이 문서 객체이다.
모듈화로 만들거나 객체를 인식한다.
DOM은 웹브라우저가 HTML을 인식하는 방법을 뜻한다.
DOM 트리는 HTML 페이지를 바이트를 문자로 변환한다.
그리고 토큰화하여 노드로 변환한다.
노드를 DOM 트리로 생성한다.
DOM 트리는 랜더링 할 때 CSSOM이 어떻게 표시할 건지 알려준다.
CSSOM (CSS Object Model)
DOM을 생성하면서 <head> 에서 style.css를 참조한 것을 보면 만들면 생성을 진행한다.
CSSOM도 DOM과 동일한 과정으로 생성된다.
바이트를 문자로 변환하고 토근화하여 노드로 변환하고 트리를 생성한다.
렌더 트리
렌더 트리는 DOM 트리와 CSSOM 트리를 합친 것이다.
렌더 트리에는 화면을 표시할 때 꼭 필요한 노드만 생성한다.
페이지에 표시되는 DOM 요소와 각 노드에 적용할 스타일을 가지고 있다.
렌더 트리 생성 과정
- DOM 트리를 순회하며 렌더링되지 않는 테그를 제외하고 일부 노드는 CSS에 의해 숨겨지면 DOM 트리에서도 생략된다.
- 각 노드에 매칭되는 CSSOM 규칙에 따라 적용한다.
- 컨텐츠와 스타일을 같이 내보낸다.
렌더 트리 배치
- 뷰포트에서 정확한 노드의 위치와 크기를 계산한다.
- 객체의 정확한 위치와 크기를 알기 위해 렌더 트리를 루트부터 순회한다.
- 뷰포트에서 노드의 위치와 크기를 담고 있는 Box model이 배치의 결과로 출력된다.
렌더 트리 그리기
렌더링 트리의 노드를 화면의 픽셀로 그려지게 된다.
요약
- HTML 파싱을 하고 DOM 트리를 구축
- CSS 파싱하고 CSSOM 트리 구축
- JavaScript 실행 ( 중간에 HTML 파일이 있으면 중단된다.)
- DOM과 CSSOM 을 조합해서 Render Tree 구축
- 뷰포트 기반으로 렌더 트리가 각 노드가 가지는 정확한 위치와 크기를 계산한다.
- 계산한 위치와 크기로 화면에 그린다.
참조
