Porfolio Page - (6) Javascript: DOM

Index
1. DOM
2. Node
3. CSSOM
4. Rendering
5. 4
6. 4
7. 4
8. 4
9. 4
10. 4
11. 4
12. 4
13. 4
14. 4
15. 4
16. 4
Reference

---

1. DOM

DOM(Document Object Model)

- 

 

2. Node

DOM Node

- EventTarget을 상속

 

(EventTarget Method)

- EventTarget.addEventListener(): 이벤트 추가

- EventTarget.removeEventListener(): 이벤트 제거

- EventTarget.dispatchEvent()

 

(Node Property)

- 

 

(Node Method)

- 

 

3.  CSSOM

CSSOM(CSS Object Model)

- CSSOM = DOM(HTML) + CSS(external, embedded, inline, user-agent stylesheet)

- 자식 tag에서 속성을 명명하지 않으면 부모 tag의 속성을 기본으로 적용

- Render Tree(display가 None이 아닌 경우만) = DOM + CSSOM

 

4. Rendering

Rendering

- 

 

(Rendering Path)

- request/response(HTML 요청) → loading → scripting(DOM 요소로 변환) → rendering(Render Tree) → layout → painting

- Construction(브라우저의 언어로 변환): DOM / CSSOM / RenderTree

- Operation(구조 작성 및 브라우저에 렌더링): Layout / Paint / Composition

- Layout은 RenderTree를 기반으로 Window에서 배치될 위치를 구상

- Paint는 Layout이후 각 부분을 잘게 나누어 각각의 요소를 비트맵으로 변환. 여러 속성값에 따라 브라우저 엔진마다 성능 개선을 위한 레이어 제작. 변화가 있다면 해당 부분만 변경.(css의 will-change는 변화될 가능성 존재할 때 사용)

- Composition: 준비된 레이어를 모아서 표기

- Construction(time to first render)시 DOM과정에서 최대한 불필요한 tag 사용하지 않도록 제거

- Operation(performant user interactions/avoid jank/ensure reflows & repaints at 60 f/s)시 paint가 자주 일어나지 않도록 처리

 

 

 

5. 

 

 

6. 

 

 

7. 

 

 

8. 

 

 

9.  

 

 

10. 

 

 

11.  

 

12.  

 

13.  

 

14.  

 

15.  

 

16.  

 

 

---

Reference

[Docs: MDN(Introduction to the DOM)] https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

[Docs: MDN(The HTML DOM API)] https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API

[Docs: MDN(Node)] https://developer.mozilla.org/en-US/docs/Web/API/Node

[Docs: MDN(EventTarget)] https://developer.mozilla.org/en-US/docs/Web/API/EventTarget

[Docs: MDN(CSSOM)] https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model