[Front End 이론] 웹페이지가 표현되는 방식

by Lovefield

Front End / Dec 22 2017

웹 페이지가 표현되는 방식

가장먼저 브라우저가 하는 일은 다음과 같다.

이과정에서 Request(요청) 와 Response(응답)가 발생하며 마지막 4번에서 브라우저는 받은 정보를 가지고 DOM과 CSSOM 그리고 Render-Tree , Paint가 발생한다.

1. Request

Request란 클라이언트(브라우저)가 서버에게 요청하는 사항이 정리된 객체 입니다.

2. Response

Response란 앞서 Request에서 받은 요청을 처리하고 그에 해당하는 데이터를 담은 객체입니다.

위의 두가지요청이 끝나고 나면 브라우저는 화면을 표시하기위한 정보를 받은 상태입니다.

주로 HTML과 CSS 파일이 되겟지요.

HTML은 DOM(Document Object Model)로 변환되며 CSS는 CSSOM(CSS Object Model) 으로 변환됩니다.

이 둘은 바이트 > 문자 > 토큰 > 노드 > 객채 모델 순으로 해석되지요.

3. DOM (Document Object Model)

앞서 1번과 2번을 통해서 받은 HTML파일은 바이트(Bytes) 상태입니다.

이 바이트 상태의 정보를 다음과 같이 처리합니다.

변환 : HTML 바이트를 지정된 인코딩(주로 UTF-8)에 따라 문자로 변환합니다.
토큰화 : UTF-8로 변환된 문자열을 W3C HTML5 표준에 의거하는 토큰(태그) 로 변환합니다.
렉싱 : 각 토큰(태그)를 속성과 규칙을 가지는 객체로 변환합니다.
DOM 생성 : HTML마크업이 여러 태그(일부는 다른태그안에 포함) 간의 관계를 정의하기 떄문에 트리 데이터 구조 내에 연결됩니다. 이 트리구조에는 부모태그와 자식태그의 관계도 포함됩니다.

이 전체 프로세스의 최종 출력이 HTML페이지의 DOM(Document Object Model)이며, 브라우저는 이후 모든 페이지 처리에 이 DOM을 사용합니다.

4. CSSOM (CSS Object Model)

페이지에 CSS가 참조 될경우 DOM을 생성하는 동안 외부 스타일시트를 받아옵니다.

수신된 CSS는 위의 HTML파일과 같은 프로세스를 진행합니다.

CSSOM이 트리구조를 가지는 이유는 HTML에서 나온 객체의 최종 스타일을 계산할때 상속되는 값도 같이 계산해야 하기 때문입니다.

5. Render-Tree

CSSOM 및 DOM 트리는 결합하여 렌더링 트리를 생성합니다.

이 렌더링 트리는 표시되는 각 요소의 레이아웃을 계산하는데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리됩니다.

HTML과 CSS 는 각기 개별적인 DOM과 CSSOM으로 나뉘어 있습니다.

이것을 합쳐서 화면에 표시하는 과정은 다음과 같습니다.

DOM 트리의 루트에서 시작하여 표시되는 노드(태그) 각각을 트레버스 합니다.
- 일부 태그는 생략됩니다. (script 나 meta 등)
- CSS를 통해 숨겨진(display:none) 도 렌더링 트리에서 생략됩니다.
일부 태그는 생략됩니다. (script 나 meta 등)
CSS를 통해 숨겨진(display:none) 도 렌더링 트리에서 생략됩니다.
표시된 각 노드에 대해서 일치하는 CSSOM 규칙을 적용합니다.
표시된 노드를 콘텐츠 및 스타일과 함께 내보냅니다.

위의 과정이 완료되면 브라우저는 완료된 렌더링 트리를 기준으로 화면에 페인트 하게됩니다.

기존글이 많이 틀리단 지적을 받고 수정합니다.

사전에 체크를 하지 않아 죄송합니다.

(알려주신 프론트엔드 개발 그륩 조은님 감사합니다)

- 참고자료 -