브라우저 렌더링 과정(1) - DOM, CSSOM과 렌더 트리

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

Lennon FE

브라우저 렌더링 과정(1) - DOM, CSSOM과 렌더 트리 본문

🧑‍💻 Web/Browser

브라우저 렌더링 과정(1) - DOM, CSSOM과 렌더 트리

Lennon 2021. 11. 19. 00:46

728x90

브라우저 렌더링 과정

1. 브라우저는 HTML, CSS, JS, IMG등 렌더링에 필요한 리소스를 request하고 서버로부터 response 받는다.

2. 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고 결합해 렌더 트리를 생성한다.

3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱해 실행한다. 이때 자바스크립트는

DOM API를 통해 DOM이나 CSSOM을 변경할 수 있고, 변경하면 다시 렌더 트리로 결합된다.

4. 렌더 트리를 기반으로 HTML의 레이아웃을 계산하고 브라우저 화면에 HTML요소를 페인팅한다.

브라우저의 핵심기능은 필요한 리소스를 서버에 요청하고 서버로부터 응답받아 브라우저에 렌더링 하는 것이다.

좀더 깊게 들어가보자.

순수 문자열로 이루어진 순수한 HTML 문서를 브라우저에 렌더링 하려면 브라우저가 이해할 수 있는 자료구조로 변환하여 메모리에 저장해야 한다.

HTML 파싱과 DOM 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Hello JavaScript!</p>
</body>
</html>

예를 들어 해당 HTML문서가 브라우저에서 어떻게 동작하는 지 알아보자.

1. 서버는 브라우저가 요청한 HTML파일을 읽어 메모리에 저장한 다음 메모리에 저장된 바이트를 인터넷을 경유해 응답한다. ex) 0101010101010110101010101101010101010

2. 브라우저는 HTML 문서를 2진수 형태로 응답 받고, 2진수 형태의 HTML문서는 meta태그의 charset 속성에 의해 UTF-8을 기준으로 문자열로 변환된다.

ex) 위에 작성한 html 코드

3. 문자열로 변환된 HTML 문서를 읽어 들여 문법적 의미를 갖는 코드의 최소 단위인 토큰으로 분해한다.

4. 각 토큰들을 객체로 변한하여 노드들을 생성한다. 이 노드들은 DOM을 구성하는 기본 요소가 된다.

ex) html, head, meta, title, body, p ...

5. HTML 요소는 중첩 관계를 가지므로 요소간의 부자 관계를 바녕해 모든 노드들을 트리 자료구조로 구성한다.

이 트리 자료구조를 DOM이라 부른다.

위에서 말한 것처럼 JS에서 DOM을 추가 및 수정할 수 있으며, 트리 자료구조에 반영되어 렌더한다.

CSS 파싱과 CSSOM 생성

HTML에 CSS를 연결하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단한다.

그 후 CSS파일이나 style 태그 내의 CSS를 HTML과 동일한 파싱 과정을 거치며 해석하여 CSSOM을 생성한다.

렌더 트리 생성

DOM과 CSSOM이 생성됐으면 브라우저에 렌더링하기 위해 렌더 트리로 결합된다.

렌더 트리는 브라우저 화면에 렌더링 되지 않는 노드들은 포함하지 않는다. ex) meta태그, script태그

이후 렌더 트리는 HTML요소의 레이아웃을 계산하는 데 사용되며, 브라우저 화면에 렌더링하는 페인팅 처리에 입력된다.

주의) 반복해서 실행될 수 있지만 성능에 악영향을 주므로 리렌더링이 빈번히 발생하지 않도록 주의해야한다.

다음 포스팅은 JavaScript로 DOM을 동적으로 조작하면 어떻게 되는 지 적어야겠다.

728x90

'🧑‍💻 Web > Browser' 카테고리의 다른 글

브라우저 렌더링 과정(2) - js파싱 및 실행, 리플로우 및 리페인트 (0)	2021.11.24

'🧑‍💻 Web/Browser' Related Articles

브라우저 렌더링 과정(2) - js파싱 및 실행, 리플로우 및 리페인트 2021.11.24

Comments

Lennon FE

브라우저 렌더링 과정(1) - DOM, CSSOM과 렌더 트리 본문

브라우저 렌더링 과정(1) - DOM, CSSOM과 렌더 트리

브라우저 렌더링 과정

HTML 파싱과 DOM 생성

CSS 파싱과 CSSOM 생성

렌더 트리 생성

'🧑‍💻 Web > Browser' 카테고리의 다른 글

티스토리툴바