이 글은 Linkedin의 글을 공부하며 번역한 글입니다.
LinkedIn ByteByteGo 페이지: How does the browser render a web page? 1. Parse HTML and generate… | 댓글 24
How does the browser render a web page? 1. Parse HTML and generate Document Object Model (DOM) tree. When the browser receives the HTML data from the server… | 댓글 24
www.linkedin.com
최근 웹개발로 프로그래밍을 처음 시작하면서, 책을 따라하거나 간단한 예제들을 통해 공부하다보니 어떻게 굴러가는지는 모르고 있었다.
이 글은 전공지식이 전혀 없던 나도 번역하면서 이해할 수 있을 정도로 쉽게 설명하고 있는 글이어서 블로그에 정리해서 올리게 되었다.
브라우저가 웹 페이지를 렌더링하는 순서를 설명하기 전에 간단하게 렌더링이 무엇인지에 대해 먼저 알아야한다.
렌더링이란?
서버로부터 받은 HTML,CSS,JavaScript 파일들을 해석해서, 우리가 사용하는 출력 장치에 출력해주는 작업을 렌더링이라고한다.
우리가 문법에 맞춰 작성한 코드를 브라우저가 해석해서, 개발자가 원하는 형태로 모니터에 구현해주는 것이라고 보면 조금 더 쉽게 이해할 수 있을 듯 하다.
브라우저는 어떻게 웹 페이지를 렌더링할까?
1. HTML코드로부터 DOM 트리를 생성한다.
우리가 작성한 HTML 코드를 트리형태로 가공하여 생성한다.
2. CSS코드로부터 CSSOM 트리를 생성한다.
HTML 코드에서 DOM 트리를 만든것처럼, CSS코드를 가공하여 CSSOM 트리를 생성합니다.
3. 렌더 트리를 만들기 위해 DOM 트리와 CSSOM 트리를 결합한다.
이렇게 만들어진 DOM 트리와 CSSOM 트리를 결합하여 최종 렌더링 트리를 생성합니다.
4. 레이아웃이라고 불리는 도형적인 정보를 얻기 위해 렌더링 트리의 각 요소들을 계산한다.
앞의 과정들을 통해 만들어진 렌더링 트리 만으로는 구체적인 크기, 위치등을 알 수 없기 때문에 이러한 계산 과정을 거쳐서 정확한 픽셀값을 도출하게 된다.
5. 레이아웃을 만드는 과정을 완료한 후 렌더 트리는 화면에 구현될 실제 컨텐츠로 변하고, 브라우저는 컨텐츠의 정확한 픽셀값을 받게됩니다. 이 과정을 페인팅이라고 부른다.
렌더링 트리의 요소들의 계산까지 끝난 후에는, 각 노드를 실제 픽셀로 변환해서 그리는 작업이 진행된다.
6. 마지막으로 브라우저는 GPU에 정확한 픽셀값을 전송하고, 웹페이지로 구현한다.
일련의 과정들을 통해 그려진 웹페이지를 브라우저가 그래픽을 처리하는 GPU로 전송하고, 우리가 사용하는 출력장치에 구현한다.
이 글을 볼때 처음 접하는 용어나 개념들이 많아서 함께 정리하려한다.
1. 노드
이 글을 이해하기 위해 구글링을 통해 다른 글들도 찾아봤을 때 노드라는 단어가 상당히 많이 등장했다.
내가 아는 노드는 노드JS밖에 없어서, 자바스크립트 관련 단어인가? 라는 착각을 했었는데 아예 다른 용어였다.
노드란 컴퓨터 과학에 쓰이는 기본적인 단위로, 렌터링 과정에서는 DOM트리나 렌더트리의 각 구성요소를 뜻한다.
다른 글을 읽을 때에도 더 부드럽게 읽을 수 있을 듯 하다.
2. DOM 트리
브라우저가 이해할 수 있는 구조로 메모리에 올리기 위해서는 웹 문서를 로드하고 파싱하여 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재해야 하는데, 이를 DOM(Document Object Model)이라고 한다.
이런 과정에서 HTML로 작성된 문서를 로드한 후 생성하는 모델을 DOM 트리 라고 부른다.
그렇다면 왜 굳이 DOM 트리로 바꾸어 올려야할까?
그 이유는 브라우저가 가장 읽고, 제어하기 쉬운 형태가 트리 형태이기 때문이다.
결국 우리가 작성한 문서들은 다 줄글형식으로 만들어진 코드이기에 브라우저가 읽고 제어하기는 불편한 형태이다.
우리가 작성한 코드의 각 객체들을 트리로 만들어서 올리면 브라우저가 편하게 사용할 수 있다.