- 브라우저에서 데이터를 받아 렌더링이 일어나는 과정을 정리하기로 하였다.
- DOM은 Document Object Model으로 XML이나 HTML 문서에 접근하기 위한 인터페이스이다.
🍻 DOM은 자바스크립트로 접근하여 수정될 수 있다.- CSSOM(CSS Object Model)은 CSS 객체 모델로 자바스크립트가 CSS를 동적으로 조작할 수 있게 해준다.
🍎 HTML 대신 CSS가 대상인 DOM이라고 할 수있다.
DOM / CSSOM 트리
-
DOM 트리가 만들어지기 위해서 일단 브라우저가 HTML의 바이트 코드를 가져와 지정된 인코딩 방법에 따라 문자로 변경한다.
-
이 문자를 브라우저가 각각 의미를 갖는 토큰으로 변환한다.
-
이 토큰을 노드로 전환하고(lexing), 이 노드들로 객체 모델(트리 구조)를 형성한다.
🎂 CSSOM 역시 위와 같은 과정을 통해서 트리 형태의 CSSOM으로 만들어진다.
브라우저 렌더링
-
위에서 만들어진 DOM 트리와 CSSOM 트리가 결합되어 Render Tree가 생성된다.
-
Render Tree는 페이지를 렌더링 하는데 필요한 노드만을 가진다.
☕ 예를 들면, display: none 속성의 노드는 렌더 트리에 포함되지 않는다. -
그리고 Layout(모든 객체들의 정확한 위치와 크기)을 계산한 뒤, 이를 기반으로 실제 렌더 트리의 각 노드를 픽셀로 변환해 화면에 출력한다(Paint).
🍶 그 뒤에도 특정 이벤트가 일어나 Layout을 다시 계산(reflow)하거나 스타일이 변경되었을 때는 repaint 작업이 일어난다.
🙌🙌🙌🙌