DOM

Javascript 리서치 도중 DOM이라는 키워드가 나와 조사해 봄

 

Critical Rendering Path : 웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정. 크게 두 단계로 나뉨

Critical Rendering Path

 1) 브라우저가 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정하는 단계

  * 파싱(Parsing) : 일련의 문자열을 의미있는 토큰(token)으로 분해하고 이들로 이루어진 파스 트리(parse tree)를 만드는 과정, 구문분석

 2) 브라우저가 해당 렌더링을 수행하는 단계

 

DOM(Document Objet Model) : 웹 페이지에 대한 인터페이스 / HTML 요소들의 구조화된 표현

CSSOM(Cascading Style Sheets Object Model) : 요소들과 연관된 스타일 정보의 구조화된 표현

 

HTML - DOM의 비교

HTML 문서 예시

위의 HTML 문서가 변환된 DOM

하지만 DOM은 꼭 HTML과 1대1 대응되지는 않는다. 작성된 HTML 문서가 유효하지 않을 때, DOM은 HTML 코드를 올바르게 교정하여 노드트리를 생성한다. 또한 DOM은 HTML 문서의 내용을 볼 수 있는 인터페이스 역할을 하는 동시에 동적 자원이 되어 수정될 수 있는데, 자바스크립트를 사용해 원본 HTML 코드는 변경하지 않고 DOM에만 새로운 노드를 추가할 수 있다.

 

* 이미지 및 텍스트 출처 : WIT 블로그 (https://wit.nts-corp.com/2019/02/14/5522)