[browser] DOM

DOM 완전정복

preview:

1. 브라우저가 어떻게 분석하는지
2. 우리가 어떻게 돔 요소를 조작할 수 있는지
3. 브라우저가 렌더링하는 순서를 알고 어떤 순서로 css 사용하고 어떤 애니매이션이 브라우저 성능에 좋은지

DOM: Document Object Model

HTML Tag => JavaScript Node

즉, HTML Tag는 각각의 DOM 요소로 mapping 됨.

크롬 브라우저 개발자도구 팁

• $0: 현재 선택한 element를 console에서 호출하는 명령어
• 각 element의 childNodes 를 콘솔에 찍어보자 => 엔터 및 comment도 node 로 변경됨.
• 대부분의 경우 element에 있는 api를 이용하여 조작하기 때문에 node를 이용하는 경우는 드물다.

CSSOM: CSS Object Model

DOM + CSS => CSSOM

CSSOM 에서 상위 Node의 속성은 하위 Node 로 cascading 됨.

정리하자면 브라우저는 HTML 파일을 읽고 DOM을 만든 후 CSS와 DOM을 이용해 CSSOM을 만들고 DOM과 CSSOM을 이용해 Render Tree를 만들게 된다. 이 때 Render Tree에 남는 Node들은 브라우저에 표시되는 것들만 남게 된다.

Render Tree에 남지 못하는 예시

• display: none
• head tag

Render Tree에 남는 예시

• opacity: 0
• visibility: hidden

⭐⭐Critical rendering path⭐⭐

브라우저에서 URL을 입력하게 되면 이런 순서로 진행된다

requests/response => loading => scripting => rendering => layout => painting

1. 브라우저가 html을 서버에게 받아오고 loading.
2. 받아온 hyml을 한줄씩 읽어서 DOM 요소로 변환, CSS는 CSSOM으로 변환(scripting)
3. 브라우저 윈도우에 표기하기 위하여 준비하는데 Rendering tree를 만든 후
4. 각각의 요소들을 어떤 위치에 얼마나 크게 표기될 건지를 계산(layout)
5. 그림을 그림(painting)

위의 과정은 어떤 일을 하냐를 카테고리로 나누어 생각을 해 보면

1. Construction: HTML 페이지에서 브라우저가 이해할 수 있도록 브라우저만의 언어로 바꾸는 파트(DOM, CSSOM, RenderTree)
2. Operationg: 브라우저가 이해할 수 있는 Rendering Tree를 이용해서 구조를 작성하고 어디에다 배치할 건지 계산을 한 후 실제로 브라우저 window에 그림을 그려주는 파트(Layout, Paint, Composition)

두 파트로 나뉜다.

Operation 파트 부연설명

1. layout: 최종적으로 계산된 CSS 스타일이 포함되어져 있는 Render Tree. 그 정보를 기반으로 하여 window 위에 레이아웃을 구상하게된다.(x, y, 너비, 높이 등의 크기 계산) 이 레이아웃이 있어야 얼마만큼 크게 그려야 될지가 계산이 된다.
2. 🌟paint🌟: 각각 부분을 조금씩 계산해 놓는 과정. 태블릿으로 그림을 그릴 때 레이어를 만드는 것과 비슷함. 현재 브라우저에서는 다양한 속성값(예를 들면 z-index)에 따라 성능개선을 위해 자동적으로 레이어를 만든다. print 단계에서는 아직 그리지는 않고 레이어만 준비해놓은 상태. 캐쉬와 비슷한 느낌? css속성값중 ‘will-change’: 이 요소는 새로운 레이어를 만들어주는 속성 값. 이것을 너무 남용하면 성능이 오히려 나빠진다.
3. Composition: 준비된 레이어를 순서대로 차곡차곡 브라우저 위에 표기하는 과정.

Point!

1. At construction time: DOM 요소, CSS 규칙이 작을 수록 tree가 작아지기 때문에 Render Tree를 빠르게 만들 수 있다. => 불필요한 div tag의 남용이나 의미없는 wrapping 클래스 및 wrapping 요소는 tree를 커지게 만들어 퍼포먼스가 떨어진다. => 최대한 요소를 작게 만들어야 함
2. At operation time: 사용자의 입력에 따라 요소가 움직이거나 애니메이션을 사용하는 경우 최소한의 동작으로 실행되는 것이 중요함.
   • composition 만 다시 실행된다면 Best!
   • 새로운 레이어가 필요하여 paint 까지 실행된다면 not bad
   • layout부터 새롭게 계산해야 한다면… worst choice 이 경우 애니메이션의 필요성에 대해 의문을 갖기도 함

참고: The Critical Rendering Path