▶ 브라우저 렌더링
브라우저 렌더링은 웹 페이지의 HTML, CSS, JavaScript 코드를 해석하고, 이를 시각적인 형태로 사용자에게 보여주는 과정을 말한다. 일반적으로 브라우저 렌더링 과정은 다음과 같다.
-
HTML 파싱: 브라우저는 웹 페이지의 HTML 코드를 파싱하여 DOM(Document Object Model) 트리를 생성. DOM 트리는 HTML 문서의 계층 구조를 나타내며, 웹 페이지의 구조와 내용을 표현한다.
-> 따라서 브라우저가 아닌 Node 환경에서는 접근할 수 없다..! -
CSS 파싱: 브라우저는 HTML 파싱 중에 외부 CSS 파일과
<style>태그 내의 CSS 코드를 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다. CSSOM 트리는 웹 페이지의 스타일 정보를 포함하며, DOM 트리와 연관되어 각 요소의 스타일 규칙을 결정한다. -
렌더 트리 구축: DOM 트리와 CSSOM 트리를 결합하여 렌더 트리(Render Tree)를 생성한다. 렌더 트리는 화면에 실제로 표시되는 요소들로 구성되며, 각 요소의 시각적인 속성과 상대적인 위치를 가지고 있다.
일부 요소들은 렌더 트리에 포함되지 않을 수도 있다. 예를 들어,<head>태그 내의 요소들은 렌더 트리에 포함되지 않는다. -
렌더 트리 배치: 브라우저는 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산한다. 이 과정을 레이아웃(Layout) 이라고도 한다.
브라우저 창의 크기 변경 등과 같이 렌더링에 영향을 주는 변화가 발생할 때 다시 수행된다. -
렌더 트리 그리기: 브라우저는 레이아웃이 완료된 후, 실제로 화면에 내용을 그립니다. 이 과정을 페인팅(Painting)이라 한다. 브라우저는 렌더 트리의 각 요소를 화면에 맞는 위치에 그린다.
-
상호작용: 브라우저는 사용자의 입력 및 상호작용에 대한 이벤트를 처리하고, 필요한 경우 변경된 부분만 다시 렌더링하여 적절한 반응성을 제공한다.
이 과정은 브라우저(예: Chromium, Firefox 등)의 렌더링 엔진에 의해 수행되며, 브라우저에 따라 세부적인 동작과 최적화가 다를 수 있다.
▶ DOM이란?
얄코 - DOM의 개념 (DOM(Document Object Model) 트리)
HTML 코드가 설계도라면 브라우저가 공장. 브라우저에선 HTML 코드를 해석(Parsing) 해서 DOM 이라는 제품(트리)을 만든다.
▶ 마치며
내가 쓴 코드가 화면에 어떻게 그려지는지 궁금하다. 개발자란 그런 궁금중을 실천하는 사람이어야 한다. 냅다 코드만 찍어내는 게 아니라
이거 보는 게 좋다
https://bbangson.tistory.com/87 웹 브라우저는 어떻게 작동하는가?
https://www.yalco.kr/@javascript-abyss/16-1/ 얄코의 DOM 설명
