브라우저 렌더링 엔진 동작 과정

EUNCHAE KIM·2023년 1월 9일

기술면접 브라우저 렌더링 웹 브라우저

웹 브라우저의 구조

User Interface : 주소 표시줄, 이전/다음/새로고침 버튼 등 웹 페이지를 제외하고 사용자와 상호작용 하는 사용자 인터페이스
Rendering Engine : HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진
Browser Enginde : 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진

웹 브라우저마다 다른 렌더링 엔진

Safari - Webkit
FireFox - Gecko
Chrome - Blink

렌더링 엔진의 목표

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

렌더링 엔진의 동작 과정

1) DOM Tree와 CSSOM Tree의 생성

렌더링 엔진은 HTML 문서를 파싱하고 "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환한다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱한다.

2) Render Tree 생성

렌더링 엔진이 DOM Tree와 CSSOM Tree를 합쳐서 렌더트리 생성.
화면에 표시되어야 할 모든 노드의 콘텐츠,스타일 정보를 포함하는 트리.
document 객체부터 각 노드를 순회하면서 각각에 맞는 CSSOM을 찾아서 규칙을 적용. 그러면서 렌더와 관련된 요소들을 렌더 트리에 포함시킴.
이 때, meta, display:none과 같은 요소들은 렌더와 관련이 없기 때문에 렌더트리에 포함되지 않음.

3) Render Tree

Layout과정. 뷰포트내에서 요소들의 정확한 위치와 크기를 계산하는 것. 각 노드가 화면의 정확한 위치에 표시되는 것

4) Render Tree 그리기

Paint과정. 렌더트리에 포함된 요소들이나 text,이미지들이 실제 픽셀로 그려짐.

UI가 업데이트되는 3가지 상황

다시 Layout이 발생하는 경우
: 주로 요소의 크기나 위치가 바뀔 때, 혹은 브라우저 창의 크기가 바뀌었을 때 다시 발생
Paint부터 다시 발생되는 경우
: 주로 배경 이미지나 텍스트 색상, 그림자 등 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 발생.
레이어(painting 할 영역을 나눠놓는것) 의 합성만 다시 발생하는 경우
: Layout과 Paint을 수행하지 않고 레이어의 합성만 발생하기 때문에 성능상으로 가장 큰 이점을 가짐

정리 : 렌더링 엔진은 HTML 문서를 파싱해 DOM 노드로 변환하여 DOM 트리를 구축합니다.그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱합니다. 이러한 DOM Tree와 CSSOM Tree을 합쳐 '렌더 트리'라는 새로운 트리를 생성한다. 렌더 트리의 생성이 끝나면 Layout 과정을 통해 각 노드가 화면의 정확한 위치에 표시되고 렌더링 엔진은 렌더 트리를 순회하면서 화면에 Paint해 최초 렌더링을 마친다.

html css를 파싱해서 읽다가 script 태그가 실행될 때, 브라우저가 DOM 생성을 멈추는 이유

자바스크립트로 DOM을 변형할 수 있기 때문에 우선 자바스크립트를 파싱해서 실행 완료 후에 DOM생성을 이어나간다. JS 엔진과 렌더링 엔진은 직렬적으로 실행된다. 만약 파싱이 중단되지 않으면 렌더트리가 다 구성되지 않았을 때 JS 엔진이 DOM 트리 변경시킬 수도 있고 아직 그려지지 않은 DOM 트리의 노드에 접근한다면 오류가 날 수 있다.

HTML 파싱 블로킹현상을 근본적으로 해결하기 위해 HTML5부터 async와 defer 추가됨. async와 defer는 HTML파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행되도록 만들어줌.