WEB - 웹페이지의 생성 과정

서론 - 웹페이지의 빌드 과정을 생각해봅시다. 

WEB 세계를 공부하고 있는 독자들이라면 단순하게 서버로부터 HTML을 웹 브라우저가 읽어와서 웹페이지를 만든다고 알고 있을 것입니다. 

이과정은 상당히 많은 단계를 거쳐서 진행됩니다. 

본문에서는 이 서버로부터 HTML문서가 어떻게 웹브라우저를 통해 제공되는지 좀 더 자세히 알아보도록 합시다.

 

Critical Rendering Path - CRP

웹 브라우저가 서버로 부터 HTML을 가져와 화면에 표시되는 이 과정을 CRP이라고 합니다. 

 

과정을 구체화 하자면 다음과 같습니다.

• DOM(Document Object Model) 트리 구축
• CSSOM(Cascading Style Sheets Object Model) 트리 구축
• Render Tree 구축
• 레이아웃 구축
• 페인팅
• Composite(조합)

DOM & CSSOM 이란?

우선 CPR 과정의 초반 단계인 DOM& CSSOM의 구축은 서버로부터 가지고 온 HTML&CSS의 요소들을 구조화시켜 논리 정연하게 가지고 옵니다. 

개발자가 HTML이나 CSS에서 표준에 맞지 않는 양식을 쓰거나 빼먹은 부분이 있더라고 웹브라우저에서 HTML문서들을 보완하여 체계적으로 구조화된 DOM&CSSOM 형태를 만들게 됩니다. 

 

Render 구축

이제 완성된 DOM&CSSOM을 기반으로 실제 웹 브라우져에서 Rendering 즉, DOM&CSSOM를 가지고 HTML 문서를 만들게 됩니다. 즉 웹브라우저에서 개발자 도구를 통해 보는 녀석이 바로 Rendering이 끝난 과정의 코드입니다.

Render tree가 구축되어 코드화 된 모습

레이아웃 구축

이제 렌더링을 통해 코드화가 완료되었다면 어떻게 화면에 출력할 것인가에 대해서 설정합니다. 이 과정을 레이아웃 과정이라고며, viewport의 설정이 이루어집니다. 

즉, 요청자가 사용하는 화면에 맞게 출력하기 준비하는 과정입니다.

 

페인팅

이 과정을 통해서 화면에 코드화된 데이터를 표시하는 과정입니다.

 

 

JavaScript는 언제 관여하는가?

DOM&CSSOM을 구축하는 과정에서 관여하게 됩니다. 

따라서 원본 HTML & CSS 문서와 

렌더링이 끝난 후 브라우저의 개발자 도구로 보는 HTML&CSS 코드는 차이가 있습니다.

 

왜 이런 과정을 거쳐야 하는가 ?

WEB상에서 표현되는 많은 전자화된 문서와 정보들을 일관적이고 규칙적으로 제공하기 위해서입니다. 

이런 과정이 필요해야만 좀 더 다양한 플랫폼에서 정확한 정보를 요청자에게 제공할 수 있게 됩니다.

또한 이렇게 구조화가 되면, 다양한 크롤링, 파싱 등의 활용에도 용의 합니다.