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

렌더트리와 그 역할 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는 하..

브라우저 엔진이란? 웹 브라우저의 핵심이 되는 구성 요소다. 브라우저 엔진은 간단히 말하면 주로 HTML, CSS 등 웹 페이지 구성을 위한 자료를 해석하여 사용자의 장치에 맞게 시각적인 표현으로 변환하는 역할을 한다. 레이아웃 엔진? 렌더링 엔진? 브라우저 엔진은 레이아웃 엔진, 렌더링 엔진이라고도 불린다. 렌더딩과 레이아웃은 별도 엔진의 의해 관리될 수 있으나 실제로 이 둘은 서로 밀접히 연결되있고 브라우저 엔진과 같이 묶어서 이야기하는 경우가 많다. 렌더링이란? 사용자가 요청한 컨텐츠를 표시하는 역할을 한다. 예를 들어 HTML을 요청하면 HTML, CSS를 파싱하여 화면에 표시하는 역할을 한다. 브라우저 엔진 작동 방법 브라우저 엔진의 종류에 따라 다소 다르지만 대체로 아래와 같은 방법으로 동작한..