웹 페이지가 화면에 렌더링 되는 과정.

DOM (Document Object Model)

웹 페이지를 만들 때 브라우저는 HTML을 body, img 태그 등을 분석해서 노드로 변환한다. 브라우저가 이해할 수 있는 과정으로 바꿔나간다.

Node는 사진 상 보이지는 않지만 부모 요소로 EventTarget 요소를 지니고 있다. HTML과 마찬가지로 자식요소들을 수 없이 많이 가지고 있고 이 것들을 따라 화면을 구성하게 된다. 따라서, 브라우저가 HTML을 읽을 때 사진과 같은 DOM Tree 구조로 변환하여 자신이 이해할 수 있는 과증올 변환하게 된다.

즉, HTML 파일을 브라우저에서 읽으면 어플리케이션이 메모리에 보관할 수 있는 Object로 맵핑하게 된다.

CSSOM (CSS Object Model)

DOM Tree와 마찬가지로 body태그는 자식 태그들을 가지고 있다. 다만 상단의 태그가 css가 적용이 되면 그 자식태그들은 같은 css가 적용이 된다. 마찬가지로 이 것이 화면에 그려지게 된다.

렌더링이 되는 과정

먼저 브라우저가 DOM Tree를 형성하여 화면을 그리게 되고 CSSOM의 css 변환 요소에 맞춰 그림을 그린다. 그리고 바뀌어진 부분을 합쳐 화면에 렌더링이 된다.