Somedding

브라우저 렌더링 본문

JavaScript

브라우저 렌더링

somedding 2024. 1. 23. 20:52

브라우저 렌더링

브라우저 렌더링은 웹 페이지의 HTML, CSS, JavaScript 등의 웹 자원들을 해석하고 화면에 그 결과를 표시하는 과정을 의미한다.

브라우저마다 다르지만, 렌더링을 수행하는 렌더링 엔진이 존재한다.

(ex. 크롬 -> 블링크(Blink), 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko))

 

 

 

 

브라우저 렌더링 과정

1. HTML 파싱

HTML을 파싱하면서 DOM트리를 구성한다.

 

이때, DOM(Document Object Model)이란, 웹 페이지의 구조를 표현하는 모델로, 웹 브라우저가 HTML 문서를 해석하여 생성된다.

문서의 각 태그와 속성은 DOM에서 하나의 객체로 표현되고, 이 객체들은 부모와 자식 관계를 가지는 트리 구조를 형성한다.

 

다음 이미지는 HTML을 파싱하여 DOM트리를 생성하는 단계를 나타낸 것이다.

DOM트리 형성

 

 

 

2. CSS 파싱

HTML과 마찬가지로 CSS를 파싱하여 CSSOM트리를 구성한다.

 

이때, CSSOM(CSS Object Model)이란, 웹 페이지의 스타일 정보를 구조화한 모델로, HTML에서 DOM이 형성되는 것과 같은 과정으로 생성된다.

 

다음 이미지는 CSS를 파싱하여 CSSOM트리를 생성한 결과를 나타낸 것이다.

CSSOM트리 형성

 

 

 

3. JavaScript 실행

JavaScript는 HTML파싱 중에 <script> 태그를 만나면 실행된다.

JavaScript를 실행하게 되면 DOM을 조작하는 경우가 있다.

 

 

<head> 태그 내의 <script> : HTML 문서가 파싱되는 과정에서 <head> 태그 내의 <script> 태그는 상대적으로 빠른 시점에 읽히게 된다. 그렇게 되면 HTML의 파싱이 끝나기 전에 실행된다.

이는 스크립트가 참조하려는 요소들이 DOM에서 형성되어 있지 않을 수 있어서 주의해야 한다.

 

<body> 태그 내의 <script> : <body> 태그 내의 <script> 태그는 대부분의 HTML의 파싱이 끝난 상태이기 때문에 보다 안전하게 DOM을 조작할 수 있다.

 

 

이런 점 때문에 일반적으로 DOM 조작이 필요한 스크립트는 <body> 태그의 끝 부분에 위치시키는 편이 좋다고 한다.

 

 

 

4. 렌더트리 구축

DOM트리와 CSSOM트리의 형성이 마쳤으면, 두 개의 트리를 조합하여 렌더 트리를 형성한다.

 

이 렌더 트리는

웹 페이지에 나타낼 각 요소들의 위치를 계산(Layout)하는 데 사용되고,

화면에 요소들을 표현하는 프로세스(Paint)를 위해 존재한다.

 

렌더 트리 형성

(이때, 'display: none;'과 같이 화면에 보이지 않는 노드는 렌더 트리에서 제외된다.)

 

 

 

5. 레이아웃(Layout 단계)

렌더 트리의 각 노드가 화면의 어디에 위치하고, 어떤 크기를 갖는지를 계산하는 레이아웃 단계를 진행한다.

 

 

 

6. 페인팅(Paint 단계)

레이아웃 단계에서 계산한 위치, 크기를 바탕으로 화면에 노드들을 그린다.

 

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)

'JavaScript' 카테고리의 다른 글

REST API? RESTful API?  (0) 2024.02.29
이벤트 버블링  (0) 2024.02.13
JavaScript 클래스  (0) 2024.01.09
호이스팅(Hoisting) 이란?  (0) 2023.11.21
주소창에 www.google.com을 입력하면?  (0) 2023.11.08
'JavaScript' Related Articles more
Comments