DOM, BOM 개념 정리

BOM (Browser Object Model)

• 브라우저 객체 모델

• location, history, navigator, screen, document 등등..

• BOM이 DOM을 포함하는 개념이다.

• DOM과 달리 표준적인 정의가 없어 브라우저 별 구현에 의존한다.

DOM (Document Object Model)

• DOM이란 XML, HTML 문서의 각 항목을 계층 (트리 구조)으로 표현해 생성, 변형, 삭제할 수 있도록 돕는 cross-platform, language-independent한 인터페이스.

DOM Tree

• Node의 트리 구조로 표시된 XML 문서.

• 브라우저에서 그려지기 위해선 CSSOM 트리와 함께 합쳐져 Render Tree를 만들어야 함.

DOM Script

• 웹 브라우저에서 DOM Script란 자바스크립트를 의미.

DOM API

• DOM Tree의 각 Node들을 생성, 변형, 삭제하도록 도와주는 API.

• DOM Script에 제공.

DOM의 문제점

• Node에 접근할 때 마다 Reflow가 발생해 레이아웃 쓰레싱으로 프레임 저하.

• 읽어 오는 것만으로도 Reflow가 발생하기 때문에 성능 저하를 일으키기가 쉽다.

• 캐싱, Virtual DOM을 사용해 DOM의 업데이트를 최소화 해야 한다.

• Previous
  CSS 레이아웃
• Next
  DOM level이란?