Web | DOM (Document Object Model) 문서객체 모델이란?

웹페이지를 만들면 브라우저가 HTML 파일을 읽기 시작하며 HTML 파일 내부의 각각의 태그들을 분석하여 Node로 변환한다.

출처: 드림코딩, 프론트엔드 101

HTML 태그를 브라우저가 이해할 수 있는 형태의 오브젝트로 변환하는 것이다.

Node 오브젝트는 EventTarget 이라는 오브젝트를 상속한다. 결국 Node 오브젝트는 EventTarget의 오브젝트라고 말할 수도 있다. 즉, 모든 Node는 이벤트가 발생할 수 있다. 따라서 document 역시 Node를 상속하기 때문에 document에서 이벤트가 발생할 수도 있다. 다시 말해 모든 Node 는 EventTarget이다 라고 할 수 있다.

 

MDN Node

MDN EventTarget

출처 : https://ko.javascript.info/basic-dom-node-properties

CSSOM : CSS Object Model

브라우저에서 DOM을 만들고 나면 우리가 정의한 CSS를 병합해서 CSSOM을 만들게 된다. 

출처: 드림코딩, 프론트엔드 101

Rendaer Tree 에는 사용자 눈에 보이지 않는 것은 포함되지 않는다다.
예를 들면 head 태그 혹은 display: none 으로 지정된 태그 (단, opacity: 0, visibility: hidden 과 같은 속성 값은 포함된다.)

성능 보장 렌더링 순서

브라우저에서 URL을 입력하면 브라우저에서 서버에 HTML 파일을 요청하고 해당 파일을 서버에서 받아와 로딩을 하게 된다. 데이터를 받아와서 HTML을 한 줄씩 DOM 요소로 변환하는데 이 과정을 scripting 이라고 한다.
이렇게 HTML 파일을 DOM으로 변환하고, CSS 요소들을 CSSOM으로 변환한 뒤에 Rendering Tree를 만들게 된다.
이 과정에서 Rendering Tree 를 만드는 Construction 파트와 실제 브라우저 window에 Rendering Tree를 출력 하게 해주는 Operation 파트로 나누어진다.

출처: 드림코딩, 프론트엔드 101

오른쪽에 가까운 동작만으로 작동할수록 성능이 좋아진다.
아래 CSS Triger 사이트에 각 속성마다 어떤 레벨에서부터 동작하는지 확인할 수 있다.
CSS Triger
Blink 는 크롬 브라우저에 쓰이는 엔진, Gecko는 파이어폭스, Webkit은 iOS, EdgeHTML 오래된 Edge브라우저(최신 Edge 브라우저는 Blink 엔진)에서 쓰인다.

좌표실습 성능 개선

layout 레벨에서 부터 동작하는 top 과 left 속성을 tanslate 를 사용하여 composition 레벨에서 동작하도록 리팩토링하여 성능을 개선한 사례다.

성능 확인

각 웹페이지의 성능 확인은 개발툴을 이용하여 확인할 수 있다. 이는 개발자 툴에서 performance 항목에서 확인 가능하다.
부드러운 화면을 보여주기 위해서는 16.67ms 안에 브라우저가 출력되어야 한다.
또한 crtl + shift + p / command + shift + p 단축키를 사용하면 개발 툴 Palette 를 사용할 수 있다. (show layout shift regions)