DOM 그리고 레이아웃 트리

Document Object Model (DOM)

DOM은 HTML, XML 문서를 노드와 객체로 표현하는데 스크립트나 프로그래밍 언어들이 접근하고 변경할 수 있도록 돕는 인터페이스이다. 웹 페이지는 일종의 문서로 웹 브라우저를 통해 해석된 내용이 화면에 렌더링되거나 내용 그 자체가 표시되기도 한다. 이렇듯 같은 문서를 가지고 다르게 표현할 수 있다는 것은 DOM을 활용하여 같은 문서를 가지고 다르게 표현하거나 조작, 저장 할수 있는 방법을 제공한다. DOM은 웹 페이지의 객체 지향적 표현이다.

W3C DOM, WHATWG DOM 표준은 브라우저에서 DOM을 구현하는 대표적인 기준으로 대부분의 브라우저가 이 표준에 따라 구현된다. 브라우저들은 표준 규약에서 제공하는 기능 외에도 추가적인 기능을 제공할 수 있기 때문에 같은 문서라도 환경에 따라 다르게 동작할 수 있음을 알아야한다.

자바스크립트에서 DOM에 접근하려면 일반적으로 사용하는 document를 들 수 있다. DOM은 element, nodeList처럼 우리가 꽤나 흔하게 접하고 사용하던 객체들을 제공하고, 실제로 이것이 DOM에 접근하는 방법이다. document.body.append() 함수를 활용하여 body 객체 하위에 새로운 Element를 입력하듯이 DOM을 통하여 문서를 변경하면 화면에도 변경된 내역이 렌더링된다.

Render Tree

Layout Tree라고 되어있어서 문서를 좀 찾아보았는데 옛날 개념아니면 Render Tree에 포함된 Layout 단계를 혼합해서 쓴 것 같다.

렌더링 트리는 DOM과 CSSOM로 구성된다. CSSOM 트리는 객체들의 CSS 명세의 데이터 모델을 트리형식으로 구성한 것이다. DOM 노드의 콘텐츠들과 각 노드들의 모든 CCSOM 정보들을 혼합하여 하나의 렌더링 트리로 만들어낸다.

이 렌더링 트리가 완성되면 레이아웃 단계 또는 리플로우라고 하는 작업을 진행한다. 기기의 표시 영역내에서 노드의 정확한 위치와 크기를 계산하는 단계이다. 개발자 도구를 통하여 Layout 이라는 이벤트로 확인할 수 있다.

그리고 최종적으로 화면에 출력하는 페인팅 작업을 진행한다.

• DOM 트리와 CSSOM 트리를 결합하여 렌더링 트리를 생성
• 렌더링 트리로 레이아웃을 진행하여 각 노드의 위치와 도형을 계산
• 노드들을 화면에 페인팅

이렇게 3단계로 생각해볼 수 있지만 실제로 브라우저 입장에서는 HTML과 CSS 마크업을 파싱하는 두 단계가 더 있다.

스크립팅

스크립트가 이 CSSOM과 DOM을 변경할 경우 브라우저는 레이아웃을 재계산하고 다시 렌더링 하는데 이를 각각 리플로우, 리페인트라고 한다.

브라우저는 파싱과 실행이 동시에 수행되는 동기화 모델이므로 스크립트가 실행되는 동안 HTML의 파싱은 중단된다. 즉, <script /> 태그를 만나면 코드 실행을 위하여 DOM 생성 프로세스를 중단한다.

그에 반해 스타일시트는 이론적으로 DOM 트리에 영향을 주지 않기 때문에 문서 파싱을 기다리거나 중단할 이유가 없다. 다만, 스크립트가 문서를 변경하는 동안 스타일 정보를 요청하는 경우라면 문제가 발생할 수 있다.¹

DOM Level?

0, 1, 2, 3 단계가 있는데 각각 구현 단계를 말한다. 0은 표준이 나오기 전, 1은 문서 탐색과 조정 기능, 2는 더 많은 이벤트와 XML 네임스페이스 지원과 같은 기능 구현들이 있다. 자세한 사항은 문서 객체 모델 링크에서 볼 수 있다.

스타일시트

종속형 시트 또는 캐스케이딩 스타일 시트_{Cascading Style Sheet}의 약어다. 마크업 언어가 실제로 어떻게 표시될지를 기술하는 언어로 HTML와 XHTML에서 주로 사용되며 XML에서도 사용할 수 있다. W3C표준이며 레이아웃과 스타일을 정의할 때의 자유도가 높다. 프로그래밍 언어도, 마크업 언어도 아니며 스타일 시트 언어라고 한다.

Cascading은 상위 요소의 스타일 속성을 하위 요소들에게 상속시켜주는 모습이 DOM 트리구조에서 마치 폭포수처럼 내려가는 모습을 닮았기 때문이다. 예외로 margin, padding, border 등의 박스 모델 관련 속성은 상속되지 않는다. 물론 inherit 값을 줘서 강제로 상속시킬 순 있다.

CSS1, 2, 3, 4 까지 사양이 나뉘어져 있는데 현재는 2005년 이후로 개발중인 CSS3 사양을 주로 사용하고 있다고 생각하면 된다. CSS3 이후로 명세의 범위가 너무도 넓어짐에 따라서 버전별로 명세를 올려 적용하기보다 권고안을 모듈별로 개발하고 공개하는 것이 더 효과적이 되었다. 따라서, CSS 버전별로 공개되지 않고 브라우저들은 최신 안정판인 CSS명세를 기반으로 모듈을 개발하여 배포하는 중이다. 이중 브라우저가 제공하는 기능을 우리가 사용하고 있다.

요즘 우리가 흔히 사용하는 애니메이션이나 여러가지 다양한 효과들이 주로 CSS3 에서 추가된 것들이 많다. 이전에는 jQuery 등 스크립트를 활용해서 구현되었었다.

박스 모델

문서의 레이아웃을 계산할 때 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다.