DOM에 대해서 간단하게 설명한 바 가 있다. html 트리구조 자체가 DOM이고 dom 요소에 js가 동적으로 접근한다고 포스팅했었다. 그렇다면 DOM과 html은 같은 용어일까?
HTML과 DOM의 차이
결론부터 말하자면 아니다. 엄밀히 말하자면 다른 개념이다. ❌❌❌
HTML이란?
HTML은 웹 페이지의 내용과 구조를 기술하는 마크업 언어다. 웹 브라우저는 HTML을 읽고 사용자에게 페이지를 표시하는 데 사용한다. HTML은 태그와 속성, 요소로 구성되어 있으며, 정적인 문서의 형태를 가진다.
DOM이란?
DOM(Document Object Model)은 HTML 문서에 접근하고 조작할 수 있는 프로그래밍 인터페이스다. DOM은 HTML 문서의 구조를 메모리에 트리 구조로 로드하여, 스크립트나 프로그래밍 언어를 통해 문서의 내용, 구조, 스타일을 동적으로 조작할 수 있다. DOM은 HTML이 로드되고 나서 생성되며, HTML의 초기 형태를 제공하지만, 이후에는 사용자의 상호작용이나 스크립트를 통해 동적으로 변경될 수 있는 살아 있는 객체다. 즉. HTML + JS 라는 의미다.
✨ DOM Rendering 과정
대략적인 그림으로 본 렌더링 과정은 다음과 같다.
Parsing과 DOM 트리 구축
웹 브라우저는 서버로부터 받은 원시 HTML 바이트를 문자로 변환한 뒤, 이 문자열을 토큰화하여 의미 있는 단위로 분리(토큰화)한다. 이 토큰들은 다시 노드로 변환되어 프로그레시브 렌더링을 하여 DOM 트리를 구성한다. 이 과정을 파싱이라고 하며, DOM 트리는 이 파싱 과정의 결과물이다. 이때, script 태그를 만나면 DOM 생성을 중단하고 js 코드를 해석한다.
프로그레시브 렌더링이란 웹 브라우저가 사용자에게 빠르게 컨텐츠를 표시하기 위해 전체 HTML을 한 번에 파싱하고 렌더링하지 않고, 받은 내용의 일부부터 순차적으로 화면에 표시하는 렌더링 방식이다. 이 방법은 사용자의 대기 시간을 줄이고, 빠른 사용자 경험을 제공하기 위해 사용한다.
CSSOM 생성
CSS 규칙을 파싱하여 CSSOM(CSS Object Model)을 생성한다. CSSOM은 DOM과 함께 작용하여 요소의 최종 스타일을 결정한다.
Render Tree 형성
DOM과 CSSOM은 결합하여 렌더 트리를 형성한다. 렌더 트리는 화면에 실제로 표시되는 요소들만을 포함한다. 이때, display:none 과 같은 속성은 Render Tree에 인식되지 않아 스크린리더가 읽을 수 없어 웹 표준에 어긋나고 SEO에 불리할 수 있으니 transform, opacity 같은 속성을 사용해야 한다. 자세한 내용은 웹 접근성 포스팅을 참고바람.
Layout(Reflow)
브라우저는 렌더 트리의 각 노드에 대한 위치와 크기를 계산하는 레이아웃 과정을 수행한다. 이 과정에서는 요소의 정확한 위치와 크기를 결정한다. 이때 레이아웃을 중간에 변경하는 것을 리플로우라고 하며, 리플로우가 많이 일어나면 브라우저에 부담이 크다.
Paint
레이아웃 단계에서 계산된 위치와 크기를 바탕으로 실제 픽셀을 화면에 그리는 단계다. 여기에는 색상, 이미지, 테두리 등의 시각적인 요소가 포함된다.
Composite
최종적으로 여러 레이어를 합성하여 사용자에게 하나의 완성된 페이지로 보여주는 단계다. 이 과정을 통해 페이지의 각 부분이 스크린에 렌더링된다.
⛳️ 정리
웹 브라우저는 요청받은 리소스(HTML, CSS, 자바스크립트 파일)를 서버로부터 받아와 사용자의 화면에 표현한다. 이 과정은 렌더링 엔진이 HTML을 파싱하여 DOM 트리를 구축하고, CSS 파싱으로 CSSOM을 만들어내는 것으로 시작된다. DOM과 CSSOM은 결합하여 렌더 트리를 형성하고, 이 트리는 웹 페이지의 시각적 요소를 화면에 배치하고 그리는 데 사용됩니다. 이러한 과정을 거쳐 프로그레시브 렌더링을 통해 가능한 빨리 사용자에게 컨텐츠를 제공한다.
참고
✔️ 브라우저는 어떻게 화면을 렌더링할까?
✔️ 프로그레시브 렌더링
