브라우저 렌더링의 원리
✔️ 브라우저 렌더링이 어떤 과정을 통해 이루어지는지 살펴보자
사용자 인터페이스
- 브라우저를 켰을 때 확인할 수 있는 주소 표시줄, 뒤로 가기 버튼, 새로고침 버튼 등, 요청한 페이지를 보여주는 창외에 사용자가 컨트롤 할 수 있는 부분
- 우리가 보고 있는 페이지를 제외한 나머지 브라우저의 그 프레임 부분에 해당하는 부분을 사용자 인터페이스라고 한다
브라우저 엔진
- 사용자 인터페이스에서 어떤 동작이 왔을 때 브라우저 엔지을 통해서 전달이 된다
- 사용자가 주소창에 입력한 URI 값을 렌더링 엔진에게 전달해 주는 역할
- 새로고침, 뒤로 가기 버튼 등 명령 또한 렌더링 엔진에게 전달한다
자료 저장소
- 자료를 저장하는 레이어
- 쿠키나 세션 등 모든 종류의 자원을 하드디스크에 저장한다
- HTML5 명세에는 브라우저가 지원하는 웹 데이터베이스가 정의되어 있다
렌더링 엔진
- 사용자가 URI를 입력했을 때, URI에 해당하는 데이터를 네트워크 레이어에 전달해 주고, 응답받은 리소스 또는 스토리지에 캐싱된 리소스를 가져와 인터프리터, UI 백엔드에 전달한다
- HTML, CSS 코드를 파싱 해서 렌더 트리를 구성해 전달해 주는 등의 총체적인 역할을 한다
네트워크(통신)
- 렌더링 엔진으로부터 HTTP 요청을 받아서, 서버에게 요청하고 응답 리소스를 받아 렌더링 엔진에게 돌려준다
- 각각의 플랫폼의 독립적인 인터페이스이고 플랫폼 하부에서 실행이 된다
자바스크립트 인터프리터
- 브라우저가 그려지기 위해서는 HTML과 CSS만 있으면 되는데 자바스크립트는 html 태그를 동적으로 움직이는 역할을 수행한다. 렌더링 엔진은 받아온 리소스 중에서 자바스크립트는 인터프리터에 주고, 나머지(HTML, CSS, image 등)를 파싱 하고 그린다. 크롬에서는 v8이라는 엔진을 사용하여 자바스크립트를 파싱한다.
- 즉, 자바스크립트 코드를 해석하고 실행을 하는 장치이다.
UI 백엔드
- 렌더링 엔진에서 생성된 렌더 트리를 브라우저에 그리는 역할을 한다.
- 콤보박스 같은 창을 생각할 수 있다.
- 기본적인 장치를 그리는 도구.
- 플랫폼에서 명시하지 않은 일반적인 인터페이스로 운영체제 사용자 인터페이스 체제를 사용하는 특징을 가지고 있다.
브라우저 렌더링 프로세스
- 사용자가 사용자 인터페이스에 주소표시줄에 URI를 입력하여 브라우저 엔진에 전달
- 브라우저 엔진은 자료 저장소에서 URI에 해당하는 자료를 찾고, 해당 자료를 쿠키로 저장했다면 그 자료를 렌더링 엔진에 전달
- 렌더링 엔진은 브라우저 엔진에서 가져온 자료((HTML, CSS, image 등)를 분석한다. 동시에 URI 데이터를 통신, 자바스크립트 해석기, UI 백엔드로 전파
- 또한 렌더링 엔진은 통신 레이어에 URI에 대한 추가 데이터(있다면)를 요청하고 응답할 때까지 기다린다
- 응답받은 데이터에서 HTML, CSS는 렌더링 엔진이 파싱한다
- 응답받은 데이터에서 JavaScript는 JavaScript 해석기가 파싱한다
- JavaScript 해석기는 파싱한 결과를 렌더링 엔진에 전달하여 3번과 5번에서 파싱한 HTML의 결과인 DOM tree을 조작한다
- 조작이 완료된 DOM node(DOM tree 구성요소)는 render object(render tree 구성요소)로 변환한다
- UI 백엔드는 render object를 브라우저 렌더링 화면에 띄워준다
렌더링 엔진의 동작 과정
✔️ 가장 중요하다고 볼 수 있는 렌더링 엔진이 어떻게 동작하는지 알아보자
DOM 트리 구축을 위한 HTML 파싱 → 렌더 트리 구축 → 렌더 트리 배치 → 랜더 트리 그리기
DOM 트리 구축을 위한 HTML 파싱
렌더링 엔진은 HTML과 CSS 리소스를 받은 작업까지 된 이후에 렌더링을 본격적으로 시작을 하는데 가장 먼저 하는 작업은 DOM 트리를 구축을 한다. DOM은 Document Object Model의 약자인데 이 DOM 노드로 기존에 가지고 있었던 HTML 문서를 파싱해서 변환을 하는 작업을 가장 먼저 하게 된다. 이 과정에서 HTMlL의 표준을 지켜서 작업을 하는 점을 기억하자.
DOM 노트를 만든 다음에 똑같이 CSS 파일을 가지고 CSS SOM 이라는 노드를 또 만든다. 이 CSS SOM은 스타일링 관련된 요소들로 이루어진 노드이다.
렌더 트리 구축
이렇게 두 가지 DOM 노드와 CSS SOM 노드를 같이 만들면 그 두 개를 가지고 렌더 Tree를 구축을 하게 된다. 이 렌더 Tree는 색상이나 면적 같은 시각적인 속성을 갖는 사각형들을 포함을 한다. 그리고 정해진 순서대로 렌더링을 진행을 하게 된다.
렌더 트리 배치
렌더 트리를 만드는 생성 작업이 끝났다면 그 다음에는 그 만들어진 Tree를 가지고 레이아웃에 배치를 하는 작업을 하게 된다. 배치를 할 때 정확하게 적절한 위치에 표시가 되기 위해 각 노드의 정확한 위치에 표시가 될 수 있도록 이동하는 작업을 진행을 한다.
랜더 트리 그리기
그렇게 배치가 완료되고 나면 색상이라든지 여러 가지 스타일 관련된 요소들을 페인팅하는 작업이 필요하다. 그런 그리는 작업을 렌더 Tree에서 마지막으로 진행을 하게된다.
렌더링 엔진에서 렌더 Tree를 구축하고 배치하고 그리는 작업은 브라우저에서 사용자 액션을 줄 때마다, 사용자 이벤트를 부여할 때마다도 계속해서 그려진다.