What is DOM?
윈도우 객체의 구성 | DOM, BOM, JavaScript
JS의 실행 환경은 브라우저와 노드로 나뉜다. JS가 브라우저에서 실행될 때 최상위의 객체는 window 객체인데, 이 window 객체에는 "DOM"이라는 것이 있다.
DOM | Document Object Model
DOM은 Document Object Model의 약자인데, 단어의 뜻 그대로 document를 자바스크립트의 object로 변환 한 것을 말한다. 여기서 document는 html과 같은 웹 페이지 파일을 가리킨다. 그렇다면 document를 왜 object로 변환하는 걸까?
우리는 "브라우저"(크롬, 사파리...)라는 소프트웨어를 통해 화면에 웹 페이지를 띄운다. 그러나 브라우저는 html 자체의 문법을 이해하지 못한다. 그렇기 때문에 서버가 보내 온 html을 한줄 한줄 parsing(분석)하며 브라우저가 이해할 수 있는 JS 객체로 변환해야 한다. 객체는 메모리에 보관이 가능하기 때문에, 우리는 변환된 document를 메모리에 보관할 수 있게 된다. 뿐만 아니라 html의 요소들은 이제 JS 객체이기 때문에 JS 코드로 이를 조작(manupulating)할 수 있다. 이 때 사용되는 APIs를 우리는 "DOM APIs"라고 부른다.
js object로 변환된 document를 개발자 도구에서 확인해 볼 수 있다.
- document | html 형식으로 보여준다.
- console.dir(document) | 실제로 변환된 object 형식으로 보여준다.
- document.all[10].innerText와 같이 JS 객체 문법으로 접근할 수 있다.
- 모든 DOM 요소를 조작하는 첫번째 단계는 "document" 객체에 접근하는 것이다.
How to make DOM? | Critical Rendering Path(CRP)
Scripting | DOM & CSSOM
웹 페이지를 구성하는 파일에 html만 있는 것은 아니다. html에 styling을 더하기 위해 작성하는 css파일도 있는데, 브라우저는 html을 자바스크립트 객체로 변환한 것과 동일하게, css를 객체로 변환하고 이를 CSSOM이라고 부른다. CSSOM에는 css 파일뿐만 아니라, style에 관련된 모든 것들이 객체로 변환되어있다. html 파일의 <style>태그 안에 작성된 코드나 태그 안에 style 속성 값, 뿐만 아니라 브라우저에 기본적으로 설정되어있는 style도 포함된다.
이렇게 다양한 style은 "cascading rules"에 따라 계산된다.
- cascading rule은 부모 노드에서 스타일로 지정된 값을 자식 노드에도 적용하는 것을 말한다.
- 예를 들어 <body>에 font-size를 16px로 지정하면 body에 포함되어 있는 자식 태그들의 font-size 역시 자동으로 16px이 된다.
Render Tree
Render Tree는 html을 객체화 한 DOM과 css를 객체화 한 CSSOM을 병합한 것이다. 이 때 render tree에는 사용자의 viewport에 보여지는 객체들만 포함되어있다. 아래 그림에서 display: none으로 설정되어 있는 span은 render tree에 포함되지 않는 것을 알 수 있다(opacity나 visiblity는 render tree에 포함된다).
Layout
스타일링된 요소들을 웹 페이지에 보여주기 위해서는, 각 요소들의 "size"와 "location"이 결정되어야 한다. layout은 바로 이것들을 수학적으로 계산하는 단계이다.
Painting
painting을 layering과 composition 과정으로 나누어 살펴보자.
layout 단계에서 수학적으로 크기, 위치가 결정된 요소들은 하나 하나씩 개별적으로 우리의 페이지에 보여지는 것이 아니라, 몇몇 요소들끼리 "layer"를 구성하고, layer 단위로 보여진다. 크롬 개발자 툴에서도 이것을 확인해 볼 수 있다.
티스토리 블로그에서 글쓰기를 하는 웹 페이지의 layer는 왼쪽과 같이 나누어져 있다. layer는 브라우저의 엔진이 나눈 웹 페이지 요소 몇가지를 하나로 묶은 그룹인데, 우리가 css의 "will-change"라는 속성을 이용하면 엔진은 그 요소를 독립된 layer로 만들어 준다. 그 요소의 스타일이 변할 수 있다는 것을 의미하기 때문에, layer를 지정해서 따로 관리하겠다는 것이다. 이렇게 하면 나중에 그 layer의 스타일에만 변화를 주면 되기 때문에 효율적이다.
layering이 끝나면 드디어 웹 페이지의 요소들을 모니터의 픽셀로 나타내게 된다. 이 과정을 "composition"이라고 한다.
Recap
HTML 파일의 크기 얼마인지, CSS에서 어떤 속성을 사용했는지(색상을 지정하는 속성은 빠르지만, 요소에 그림자 지정하기 속성은 느리다), 어떤 디바이스에서 이런 작업들이 이뤄지고 있는지에 따라 rendering이 완료되는 데 걸리는 시간은 다를 수 있다. 파일 크기를 최소화하기 위해 쓸 데 없는 코드를 작성하지 않는 것, 너무 무거운 스타일링을 피하는 것이 중요하다.
최초로 웹 페이지를 모니터에 불러온 뒤에도, 애니메이션이나 반응형 디자인 등을 통해서 페이지에 변화를 줄 수 있다. 이 때 layout에 변화가 생기면, layout - painting - composition의 과정을 다시 한 번 거쳐야 하기 때문에 시간이 오래 걸려 웹 페이지의 성능에 문제가 생길 수 있다. 1 frame 당 16.67ms의 속도가 이상적인데, 이 값 또한 개발툴의 performance 탭에서 확인할 수 있다.
css의 속성이 layout을 변화시키는지, paint를 변화시키는지 알고싶으면 csstriggers를 참조하면 된다.
csstriggers.com 참고 | Blink - chrome, Gecko - firefox, Webkit - safari
'Study > DOM' 카테고리의 다른 글
| Intersection Observer (0) | 2022.07.06 |
|---|---|
| Window & Document object (0) | 2022.04.18 |
| Event types & object (0) | 2022.04.08 |
| What is Event? (0) | 2022.04.08 |
| Select & Manipulate (0) | 2022.04.07 |
