브라우저의 렌더링 과정 & Render Tree와 DOM Tree의 차이점

개발 2022. 3. 15. 20:36

🌲 렌더링 트리 생성 과정

1. 객체 모델 (Object Model) 생성

<< DOM 객체를 구성하는 과정 >>

변환
HTML 코드가 있으면 렌더링 엔진은 HTML의 원시 바이트를 디스크나 네트워크에서 읽어와서, 해당 파일에 대해 개별 문자로 변환한다.
토큰화
개별 문자로 변환된 것을 HTML5 표준으로 지정된 고유 토큰으로 변환한다. 각 토큰은 고유한 의미와 규칙을 가진다.
DOM 생성
마지막으로 HTML 마크업이 여러 태그 간의 관계를 정의하기 때문에 생성된 객체는 트리 데이터 구조 내에 연결된다.
이 트리 데이터 구조에는 마크업에 정의된 상위-하위 관계를 포함한다. (ex: HTML 객체는 body 객체의 상위라는 관계다.)
이렇게 구성된 DOM 트리는 HTML 문서 마크업의 속성과 각 노드의 관계에 대한 정보를 가지고 있지만, 아직 이 요소들이 렌더링 될 때 어떻게 표시할지에 대해서는 알 수가 없다. 이는 CSSOM의 역할이다.

<< CSSOM 객체를 구성하는 과정 >>

렌더링 엔진이 HTML DOM을 생성하면서 외부 CSS StyleSheet 파일을 참조하는 <head> 섹션에서 링크 태그를 접하면, 이 리소스에대한 요청을 네트워크 레이어에 즉시 발송하고 요청의 결과로 css 파일을 응답받는다.
HTML과 마찬가지로 수신된 CSS규칙을 렌더링 엔진이 이해하고 처리할 수 있는 형식으로 변환해야 한다.

HTML처럼 CSS도 바이트가 문자로 변환되고 -> 토큰으로 변환 -> 노드로 변환 -> 마지막으로 CSSOM이라는 트리 구조에 링크가 된다. CSSOM이 트리구조를 가지는 이유는, 최상의 노드에서 하위로 내려갈수록 더욱 구체적인 규칙을 적용하는 방식이기 때문이다.

즉, 스타일을 하향식으로 구체화한다. 또 여기서 구성된 CSSOM 트리는 개발자가 스타일시트에서 정의하도록 직접 작성한 스타일만 표시가 된다.

2. Rendering Tree 구축, 배치, 그리기

DOM 트리와 CSSOM 트리는 독립적인 객체다. 이 두 가지를 결합하여 렌더링 트리를 형성해야 브라우저가 화면에 픽셀을 렌더링 할 수 있다.

<< 렌더링 트리 구축 >>

DOM 트리의 루트에서부터 시작하여 페이지를 렌더링하는데 필요한 노드만 남긴다.
스크립트 태그나 메타 태그 같은 요소는 렌더링에 반영되지 않고, css의 display: none; 속성도 렌더링 트리에 포함되지 않는다.
하지만 visibility: hidden;은 보이지는 않지만 공간을 차지하기 때문에 렌더링 트리에 포함된다.
화면에 표시되는 모든 노드의 컨텐츠 및 스타일 정보들을 포함하는 구조로 이루어진 렌더링 트리가 최종적으로 구축된다.

<< 렌더링 트리 배치 >>

사용자의 뷰포트 기준으로 렌더링 트리가 그려질 위치와 크기들을 계산하는 단계이다.
페이지에서 각 객체의 정확한 크기와 위치를 파악하기 위해 렌더링 엔진은 다시 렌더링 트리의 루트에서부터 계산에 들어간다.
각 노드들의 정확한 위치와 크기가 계산되어 레이아웃이 완료되면 렌더링 엔진은 Paint Setup 및 Paint 이벤트를 발생시킨다.

<< 렌더링 트리 그리기 >>

이 과정에서 스타일이 복잡할 수록 페인팅에 걸리는 시간이 늘어난다. 이렇게 렌더링 과정을 거치게 되며 만약 DOM이나 CSSOM이 수정되면 화면에 다시 렌더링할 필요가 있는 픽셀을 파악하려면, 전부 처음부터 반복해야한다.

🎬 브라우저 렌더링 과정 ( Browser Rendering Process )

사용자가 주소표시줄에 URL을 입력하고 엔터를 치는 순간부터 브라우저의 각 요소는 상호작용을 하며 웹페이지를 화면에 띄운다.

1. 브라우저 엔진이 사용자 인터페이스로부터 URI를 받아 자료 저장소를 찾는다.

** URI 와 URL의 차이점 **
URI: URI는 특정 리소스를 식별하는 통합 자원 식별자(Uniform Resource Identifier)를 의미한다. 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스다.
URL: URL은 흔히 웹 주소라고도 하며, 컴퓨터 네트워크 상에서 리소스가 어디 있는지 알려주기 위한 규약이다. URI의 서브셋이다.

사용자가 주소창에 입력하는 순간 브라우저 엔진에게 전달하고, 브라우저 엔진은 주소 값에 해당하는 데이터를 먼저 자료 저장소에서 찾아본다.

사용자가 URI를 입력할 때마다 항상 서버로 가서 똑같은 데이터를 받아 오는게 아니라, 불필요한 통신을 줄이기 위해 자료 저장소에 자주 방문하는 사이트의 데이터를 저장해둔다. 이것을 캐싱이라고 한다.

캐시에 대해 더 알아보기 위해 참고할 링크

따라서, 브라우저 엔진은 URI에 해당하는 자료를 자료 저장소에서 찾고, 있으면 그대로 렌더링 엔진에게 준다.

2. 렌더링 엔진이 브라우저 엔진 또는 네트워크 레이어로부터 자료를 받는다.

캐싱된 자료가 있다면 ? 렌더링 엔진은 브라우저 엔진으로부터 자료를 받아 HTML, CSS, image 등을 파싱.

캐싱된 자료가 없다면 ? 서버에 요청해서 자료를 찾아온다.

이 경우 렌더링 엔진에게 사용자가 입력한 주소값(URI)를 전달하고 렌더링 엔진은 통신 레이어에 전달한다.
통신 레이어는 URI 주소 값으로 서버에 요청을 보내고, 응답으로 주소 값에 해당하는 HTML, CSS, JS 값을 받으면 렌더링 엔진에게 준다.

3. 렌더링 엔진이 자바스크립트 해석기 및 네트워크와 소통하며 렌더링 구조를 그려 UI 백엔드에 넘긴다.

UI 백엔드란?
렌더링 엔진에서 생성된 렌더 트리를 브라우저에 그리는 역할을 한다. (페인트 작업)

렌더링 과정의 중추 역할을 하는 렌더링 엔진이 HTML과 CSS를 파싱하여 렌더링 트리로 변환하는 과정을 거친다.
렌더링 엔진은 브라우저 엔진으로 받거나 통신 레이어로부터 넘겨받은 리소스 중, HTML과 CSS는 직접 파싱하고, JS는 크롬 기준 V8엔진으로 파서에게 전달하여 파싱한다. 파싱한 결과를 렌더링 엔진에게 다시 전달하여, 파싱한 HTML의 결과인 DOM Tree를 자바스크립트로 조작한다. 조작이 완료된 DOM 트리 구성요소는 렌더링 트리 구조로 변환되고, 이렇게 최종적으로 만들어진 Render Object를 렌더링 엔진이 UI 백엔드에 주어서 화면에 페인팅해준다.

Render Tree와 DOM Tree의 차이점

Render Tree는 DOM과 CSSOM을 합한 후에 최종적으로 브라우저에 표기할 노드들만 선별되어 트리가 생성이 된다.
DOM은 브라우저에 보이는 것이 아니고 Render Tree는 브라우저에 보이는 것이다.
뷰포트에 무엇을 렌더링할지 결정하기 위해 사용되는 것이 DOM이고 Render Tree는 뷰포트에 무엇을 렌더링할지 결정된 최종적인 트리다.

'개발' 카테고리의 다른 글

Execution Context 알아보며 나한테 묻는 QA (0)	2022.03.16
DOM 알아보며 나한테 묻는 QA (0)	2022.03.15
GraphQL - [ useQuery & useLazyQuery ] (0)	2021.02.17
API Documentation - PostMan (0)	2021.01.27
React-Navigation 화면 포커스 감지 문제 해결 (6)	2020.11.25

ABOUT ME

LeeHyojin Blog LeeHyojin Blog

🌲 렌더링 트리 생성 과정

1. 객체 모델 (Object Model) 생성

2. Rendering Tree 구축, 배치, 그리기

🎬 브라우저 렌더링 과정 ( Browser Rendering Process )

1. 브라우저 엔진이 사용자 인터페이스로부터 URI를 받아 자료 저장소를 찾는다.

2. 렌더링 엔진이 브라우저 엔진 또는 네트워크 레이어로부터 자료를 받는다.

3. 렌더링 엔진이 자바스크립트 해석기 및 네트워크와 소통하며 렌더링 구조를 그려 UI 백엔드에 넘긴다.

Render Tree와 DOM Tree의 차이점

'개발' 카테고리의 다른 글

티스토리툴바

ABOUT ME

🌲 렌더링 트리 생성 과정

1. 객체 모델 (Object Model) 생성

2. Rendering Tree 구축, 배치, 그리기

🎬 브라우저 렌더링 과정 ( Browser Rendering Process )

1. 브라우저 엔진이 사용자 인터페이스로부터 URI를 받아 자료 저장소를 찾는다.

2. 렌더링 엔진이 브라우저 엔진 또는 네트워크 레이어로부터 자료를 받는다.

3. 렌더링 엔진이 자바스크립트 해석기 및 네트워크와 소통하며 렌더링 구조를 그려 UI 백엔드에 넘긴다.

Render Tree와 DOM Tree의 차이점

'개발' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바