DOM에 대해서

DOM(Document Object Model)

• Document Object Model의 약자
• 브라우저를 이해할 수 있는 자신들만의 오브젝트로 변환하게 되는 것
  ex) HTML의 <tag>가 javascript의 node라는 오브젝트로 변환됨.

DOM 과정

• DOM node는 DOM API를 쓰는데 꼭 필수적인 인터페이스이다.

• node

  여러 가지 DOM 타입들이 상속하는 인터페이스이며 그 다양한 타입들을 비슷하게 처리할 수 있게 한다

• 이 node라는 오브젝트는 EventTarget이라는 오브젝트를 상속한다. 즉 모든 node는 이벤트가 발생할 수 있다. document, element(HTMLElement, HTMLDivElement 등), text ... 은 node를 상속한다. 즉 모든 요소에서 이벤트가 발생 가능하다.eventTarget은 3가지 method가 있다.
  addeventListener은 결국 eventTarget에서 지원해주는 API였다.

part 1

• 브라우저가 웹페이지를 읽어서 한 줄씩 DOM트리로 변환하게 됨. (=브라우저가 이해할 수 있도록 자신들만의 오브젝트 나무로 만들어 나가는 과정)

part 2

• html에 있는 각각의 태그들이 DOM요소랑 하나씩 맞물려짐.(=각 태그에 상응하는 DOM트리요소가 있다)

    ex) `<h1>` = HTMLHeadingElement, `<text>` = TextNode

개발자도구에서 원하는 부분 클릭후 $0을 하면 그 부분이 모두 나오게됨.
$0.childNodes => 모든 node들을 받아오게 됨 parentNode, nextSibling 등등 사용

CSSOM (CSS Object Model)

• DOM + CSS = CSSOM

• CSSOM에는 우리가 정의한 스타일 뿐 아니라 브라우저에서 기본적으로 설정된 모든 속성값들 cascading에 따라 설정된 모든 css값들이 정의돼 있다.

• DOM + CSSOM = Render Tree

• Render Tree는 궁극적으로 사용자에게 보여지는 요소들로만 구성됨. Render Tree에 head부분이 포함되지 않는 이유는 사용자 눈에 절대 보여지지 않기 때문이다.

• display: none이라고 설정된 태그는 최종 Render Tree에는 포함 안 됨.
  opacity:0, visibility: hidden은 눈에는 안보이지만 Render Tree에 포함됨.

Critical Rendering Path

• 성능이 좋은 웹 페이지를 만들기 위해 중요!
• 브라우저가 url을 입력하면 아래 과정이 이루어진다.
  1. requests/response : html파일 요청
  2. loading : 데이터 로딩
  3. scripting : html을 한줄한줄 읽어 DOM요소로 변환하는 과정
  4. rendering
  5. layout : Render Tree 정보를 기반으로 window에서 어디에 어떻게 위치시킬지를 구상하게됨
  6. painting : 바로 그림그리는 것이 아니라 각각 부분을 잘게잘게 나누어 미리 준비해 놓는다.
  레이어 별로 paint를 준비해만 놓는다.
  브라우저가 성능개선을 위해 스스로 준비해 놓는것!
  레이어를 많지 않게 하는 것이 좋다.
  
  
• 하는 일에 따라 크게 construction 파트와 operation 파트 2가지 파트로 나눌 수 있다

1. construction 파트(DOM + CSSOM + RenderTree) :

• 최대한 요소를 적게해 트리를 작게 만드는 것이 성능에는 좋음

2. operation 파트(layout + paint + composition) :

• composition : 차곡차곡 브라우저 위에 표시한다.
  transition은 composition만 일어난다.
  하지만 색상이 바뀌거나 다른 요소의 위치를 변경시키는 일이 발생한다면 layout과 paint가 다시 이루어져야 해서 성능이 나빠질 수 있다.