브라우저 랜더링 프로세스
렌더링이란 HTML, CSS, JavaScript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말한다.
웹 개발을 하며 브라우저의 렌더링 과정을 정확하게 이해하고 있으면 어떻게 개발을 해야 좋은 성능을 내는지, 성능 최적화를 어떻게 해야하는지를 정확하게 판단할 수 있다.
브라우저 랜더링 최적화를 알아보기 전에 브라우저의 구성 요소, 렌더링 엔진의 동작 과정에 대해 알아보았다.
Browser 구성 요소
사용자 인터페이스 : 주소표시줄, 이전/다음 버튼, 홈버튼, 새로고침/정지 버튼 등 요청한 페이지를 보여주는 창 외에 사용자가 컨트롤 할 수 있는 부분
브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이에 동작을 제어
렌더링 엔진
요청한 URI를 브라우저 엔진에게 받아서 통신으로 전달
server로부터 받은 데이터(HTML, CSS, JavaScript)를 자바스크립트 해석기에 전달
렌더링 엔진에서 render tree 가 생성 및 배치 후 UI 백엔드로 전달
통신 : 렌더링 엔진으로부터 HTTP 요청 등을 받아서 네트워크 처리 후 응답을 전달(OS 단에서 실행)
자바스크립트 해석기(chrome V8) : JavaScript 를 파싱
자료 저장소 : 쿠키 등의 자료를 컴퓨터 하드디스크에 저장 (HTML5 부터 Web Database에 저장가능)
UI 벡엔드 : render tree를 browser 에 그리는 역할을 담당
브라우저 랜더링 프로세스
브라우저가 렌더링하는 과정
사용자가 사용자 인터페이스에 주소표시줄에 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를 브라우저 렌더링 화면에 띄워준다.
렌더링 엔진 동작 과정
1. DOM(Document Object Model) 생성
아래와 같은 HTML 을 parsing 하여 DOM tree 를 생성한다.
DOM 으로 바꾼 HTML은 Javascript 가 조작할 수 있다.
2. CSSOM(CSS Object Model) 생성
css parsing 하여 CSSOM 생성한다.
3. Render Tree 생성
순수한 요소들의 구조와 텍스트만 존재하는 DOM Tree와는 달리 Render Tree에는 스타일 정보가 설정되어 있으며 실제 화면에 표현되는 노드들로만 구성된다.
DOM tree를 구성하는 하나의 DOM node 는 attach 라는 method를 가진다.
새로운 DOM node 가 추가되면 attach가 호출되어 render object를 생성한다.
render object는 render tree의 구성요소로써, 자신과 자식 요소를 어떻게 배치하고 그려야할지 안다.
node의 css box 를 표시할 정보를 가지고 있다.
모든 DOM node가 전부 render object 로 생성되는 것은 아니다. (ex head tag, display none tag 등)
<html> 과 <body> DOM node 또한 render object 로 구성되는데 이들은 render tree root로써 render view 라고 부른다.
나머지 DOM node 들은 render object 로 생성되어 이 render tree root에 추가된다.
4. Layout
브라우저의 뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산한다.
풀어서 얘기하자면 생성된 Render Tree 노드들이 가지고 있는 스타일과 속성에 따라서 브라우저 화면의 어느위치에 어느크기로 출력될지 계산하는 단계이다.
5. Paint
Layout 계산이 완료되면 render object 의 paint method 를 호출하여 실제 화면을 그리게 된다.
📑 참고 자료