[1일1CS] DOM 은 무엇일까?

프론트엔드 직무를 원한다면 절대 몰라서는 안되는 필수 CS 입니다. 많이많이 중요합니다!

 

DOM : 문서 객체 모델 (The Document Object Model) HTML, XML 문서의 프로그래밍 인터페이스이다.
브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM 이라고 한다.

# DOM 의 기능

1. HTML 문서에 대한 모델 구성

• 브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이때 모델은 객체의 트리로 구성되는데 이것을 DOM tree 라고 한다.

2. HTML 문서 내의 각 요소에 접근/수정

• DOM 은 모델 내의 각 객체에 접근하고 수정할 수 있는 프로퍼티와 메소드를 제공한다. DOM이 수정되면 브라우저를 통해 사용자가 보게 될 내용 또한 변경한다.
• DOM 에서 모든 요소, 어트리뷰트, 텍스트는 하나의 객체이며 Document 객체의 자식이다. 요소의 중첩단계는 객체의 트리로구조화하여 부자관계를 표현한다.
• DOM tree의 진입점은 document 객체이며 최종점은 요소의 텍스트를 나타내는 객체이다.

 

DOM tree

 

문서노드(Document Node)
트리의 최상위의 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM  tree에 접근하기 위한 시작점이다.

요소 노드(Element Node)
태그들의 속성을 객체화한 노드이다.
어트리뷰트, 텍스트노드에 접근하려면 먼저요소 노드를 찾아 접근해야 한다.

어트리뷰트 노드(Attribute Node)
어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다.
해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정 가능하다.

텍스트 노드(Text Node)
태그의 텍스트를 객체화한 노드이다.
텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다

 

# DOM 은 과연 느릴까?

요즘 DOM API 를 수많은 플랫폼과 웹 브라우저에서 사용한다. 이 DOM 에는 치명적인 한가지 문제점이 있다.

바로 동적 UI에 최적화 되어있지 않다라는 점이다.  HTML 은 자체적으로는 정적이다. 자바스크립트로 동적으로 만들 수 있다. 하지만, 요즘 흔히 접하는 큰 규모의 웹 어플리케이션은 수많은 데이터를 로딩하고 각 데이터를 표현하는 요소들이 있다. 요소가 몇백개, 몇천개가 있다면 이야기는 달라진다. 이렇게 큰 규모의 웹 애플레이션에서는 DOM 에 직접 접근하여 변화를 주다보면 성능 이슈가 발생한다. 말그대로 느려진다는말이지만, 이건 정확한말은 아니다.

 

DOM 자체는 빠르다. DOM 자체를 읽고 쓸때의 성능은 자바스크립트 객체를 처리할때 성능과 비교해 다르지않다.

단, 웹 브라우저에서 CSS 를 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하게된다.

이 과정에서 시간이 허비 되는것이다.

 

# 그럼 과연 해결법이 있을까?

DOM 을 조작할때마다 엔진이 웹페이지를 새로 그리기 때문에, 업데이트가 잦으면 성능이 저하될수 있다.

DOM 을 아예 조작하지 않을 수는 없고, 그대신 DOM 을 최소한으로 조작하여 처리할 수 있다.

그 방법이 바로 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화 시킴으로써, DOM 처리 횟수를 최소화하고 효율적으로 진행한다.