컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

렌더트리와 그 역할 CSSOM과 DOM 트리는 결합하여 렌더 트리를 만들어낸다. 렌더 트리는 웹 페이지에 나타낼 각 요소들의 위치(Layout, 레이아웃)을 계산하는데 사용되고 픽셀을 화면에 렌더링하는 페인트(Paint) 즉 화면에 요소들을 표현하는 프로세스를 위해 존재한다. 렌더트리의 생성과 그 후 과정 렌더 트리는 DOM과 CSSOM의 결합으로 만들어진다. 1. DOM 트리의 루트(Document)에서 시작되어 단계별로 노드들을 배치한다. 이때 일부 노드(메타태그, 스크립트 태그) 등은 여기서 제외된다. 또한 CSS를 통해 숨겨지는 노드들도 여기서 제외된다. 2. 표시된 각 노드들에 대해 적절하게 맞는 CSSOM 규칙을 찾아 적용한다. 3. 표시된 노드들를 콘텐츠와 계산된 스타일과 결합하여 내보낸다...

CSSOM(CSS Object Model)이란? 웹 사이트를 브라우저상에 표현할 때 서버로부터 받은 정보를 브라우저가 렌더링 엔진을 통해 파싱하는데 이 때 두 가지가 요소를 파싱하는데 하나는 HTML, 또 하나는 CSS다. 이때 HTML을 파싱하여 자료를 구조화 한것을 DOM이라 하고 CSS 내용을 파싱하여 자료를 구조화한 것을 CSSOM이라 한다. 즉 DOM처럼 CSS의 내용을 해석하고 노드를 만들어 트리 구조로 만든 것을 CSSOM이라 한다. CSSOM은 왜 트리구조일까? 잘 생각해보면 CSS는 트리 구조일 필요는 없다. DOM의 경우 태그 별로 상하위가 이미 존재하고 문서 구조화를 통해 다양한 작업을 수월하게 할 수 있다. 하지만 스타일은 위아래가 없는데 트리 구조라는게 이상하다. 이는 CSS는 하..