DOM

Browser Rendering

HTML을 파싱하여 DOM tree를, CSS를 파싱하여 CSSOM tree를 만들고 이 둘을 조합해 Render tree를 만든다. 이를 배치하고 그리는 과정이 바로 이전 포스트에서 다룬 Reflow와 Repaint이다.

수정된 Render tree를 다시 렌더링하는 과정에서 발생한다. Reflow는 위치와 크기를 계산, Repaint는 시각적인 요소를 표현하는 과정이다. 당연히 필요한 과정이지만 효율적으로 컨트롤하지 못하면 웹애플리케이션의 성능을 떨어뜨리는 주된 요인이 된다.

여러 노드를 하나의 그룹으로 감싸 다른 곳으로 전달하게 해주는 Wrapper 노드이다. 리액트에서의 Fragment와도 의미상 비슷한 개념이라고 볼 수 있겠다.

자바스크립트는 큰 틀에서 보면 DOM, BOM, 그리고 Core로 분류된다고 한다. 참고로 Core는 문법, 라이브러리 등을 의미한다는 점 정도로만 알아두고, 객체 모델인 DOM과 BOM에 대해 다뤄본다.

자바스크립트의 전역 객체는 모든 객체의 최상위 객체를 의미한다. 브라우저 환경에서는 window, 노드 환경에서는 global이 전역 객체이다.

DOM을 조작할 때 접하게 되는 유사배열들이다. Live하냐 Static하냐의 차이가 중요한데, 이를 인지하고 있지 못하면 언젠간 버그를 마주칠 수밖에 없겠다.