웹서버 & 웹페이지 & 웹브라우저

 

웹은 세계의 여러 대학과 연구기관에서 일하는 물리학자들 상호간 신속한 정보교환 및 공동연구를 위해 개발되었다.

 

01. 웹 주체: 웹서버 -> 웹페이지 -> 웹브라우저

사용자가 웹 페이지에 접근할 때 웹 내에서의 흐름은 웹서버 -> 웹페이지 -> 웹브라우저로 설명될 수 있다.

 

1) 웹 브라우저에서 요청 발생

사용자가 웹 브라우저를 통해 특정 웹페이지에 접근하려 한다면 www.naver.com과 같은 주소를 주소창에 입력하거나 링크를 클릭할 것이다.  웹 브라우저는 이 요청을 처리하기 위해 해당 웹페이지에 제공하는 웹서버에 요청을 보낸다.

 

2) 웹 서버에서 웹 페이지 제공

웹 서버는 요청된 웹페이지(www.naver.com)의 HTML 파일과 관련된 CSS 파일, 이미지 등을 보유하고 있다. 웹 서버는 웹 브라우저의 요청을 받아 요청된 웹페이지를 찾아서 브라우저에 전달한다.

 

3) 웹 브라우저에서 웹 페이지 렌더링

웹 브라우저는 웹 서버로부터 받은 HTML, CSS, JS 등을 해석하여 이를 사용자가 볼 수 있는 형태로 렌더링해 화면에 보여준다. 

즉, 웹브라우저는 웹서버에서 전달받은 웹페이지를 사람이 읽을 수 있도록 변환해주는 것이다.

 

 

#1. 웹 페이지

논문, 실험 결과 등의 우리가 인터넷에서 보는 정보나 문서이다.

웹페이지는 특수한 언어(HTML)로 제작되어 있어 사람이 바로 읽을 수 없다.

따라서 웹 페이지의 리더기인 웹 브라우저가 필요하다.

 

#2. 웹 브라우저

웹 브라우저는 웹 페이지의 리더기와 같다.

우리가 인터넷을 통해 웹 페이지를 볼 수 있게 해주는 소프트웨어이다.

Chrome, Safari와 같은 프로그램이 웹 브라우저에 해당하며, HTML로 작성된 웹 페이지 파일을 읽어서 사람이 볼 수 있는 형태로 변환해준다. 즉 HTML 코드를 웹 페이지로 렌더링해준다.

 

 

 

 

#3. 웹 서버

인터넷에서 웹페이지와 같은 콘텐츠를 클라이언트에게 제공하는 역할을 하는 컴퓨터 시스템, 소프트웨어이다.

웹 페이지는 여러 컴퓨터에 저장되어 있으며, 이 컴퓨터들은 웹 브라우저가 요청할 때마다 해당 웹페이지를 전달해준다. 이때 이 컴퓨터들이 웹페이지를 제공해준다는 측면에서 웹 서버라고 부른다.

 

 

 

 

 

02. 웹페이지: HTML + CSS + JS

#1. HTML(HyperText Markup Language)

HTML로 작성된 문서는 웹 브라우저에서 볼 수 있는 웹 페이지를 정의한다. 웹 브라우저가 이 문서를 읽어들여 사용자가 보는 웹페이지를 구성하는 것이며, 해당 문서에 보여주고자 하는 다양한 콘텐츠가 포함될 수 있는 것이다.

 

 

• 하이퍼 텍스트: 문서간 이동을 정의. 다른 문서로 연결될 수 있는 링크가 포함된 텍스트를 의미
• 마크업 언어: 문서를 구성하는 구조적 의미. 텍스트에 특별한 태그나 표기법을 추가하여 그 텍스트의 구조와 형식을 정의하는 언어.

HTML은 다양한 태그를 사용하여 웹 페이지의 각 요소를 정의한다. 해당 태그들은 웹 브라우저가 그 요소를 어떻게 표현할 지를 지시하기도 한다. 예를 들어 <h1>태그로 표시되면 웹 브라우저에 큰 제목으로 표시하라고 지시하는 것과 같다.

 

 

#2. CSS(Cascading Style Sheets)

Cascading Style Sheets로 웹페이지의 스타일과 레이아웃 등을 결정하며, 우선 순위가 있는 언어이다.

우선 순위는 Selector와 Specificity로 결정된다.

• Selector: 어떤 HTML 태그에 스타일을 적용할지 결정
• Specificity: CSS 선택자가 얼마나 구체적인지를 나타내며, inline style->id->클래스->태그 순서로 우선순위가 높고, 우선순위가 높을 수록 해당 스타일 규칙이 우선 적용된다.

우선순위가 같은 것을 가리킬 때는 가장 아래에 있는 것으로 결정된다.

 

 

#3. JS(JavaScript)

JS는 유저와 웹 페이지 사이의 모든 인터렉션을 처리하며, 버튼을 누르면 어떤 색이 변하거나 링크를 누르면 경고창이 뜨는 등의 이벤트를 처리할 때 사용된다.

 

 

 

 

03. 웹브라우저: Render 절차

웹브라우저는 웹페이지의 3개 구성요소인 HTML, CSS, JS를 모두 실행 및 렌더하여 유저에게 웹페이지를 노출시킨다.

파란색 원이 Render Tree를 의미

 

#1. HTML -> DOM(Document Object Model)

HTML은 웹페이지의 구조를 정의하는 텍스트 문서이다. 

웹 브라우저는 HTML 파일을 받아 이를 DOM이라는 구조로 변환한다. 즉, DOM은 웹 페이지의 콘텐츠, 구조, 스타일 요소 등을 구조화시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.

DOM은 단순한 HTML 문서가 아닌 JS를 통해 조작할 수 있는 객체 모델이다. 즉, DOM을 통해 웹 페이지의 구조나 내용이 동적으로 변경될 수 있으며, JS와 같은 스크립트 언어가 쉽게 웹페이지에 접근하여 조작할 수 있게 연결시켜주는 역할을 한다.

 

DOM은 HTML 문서의 계층적 구조를 나타내며, 각 HTML 요소는 DOM 트리의 노드로 표현된다. 따라서 HTML DOM, D
OM Tree로 부르기도 한다.

 

 

#2. CSS -> CSSOM(CSS Object Model)

CSS는 웹페잊의 스타일을 정의하는 언어로, 웹브라우저는 CSS파일을 받아 이를 CSSOM이라는 구조로 변환한다.

CSSOM은 CSS 스타일 규칙들을 트리 구조로 표현한 것이다.

CSSOM은 DOM과 같이 JS를 통해 조작 가능하며, 이를 통해 스타일을 동적으로 변경 가능하다.

 

 

3. DOM Tree + CSSOM Tree -> Render Tree

브라우저는 DOM과 CSSOM을 결합해 Render Tree를 생성한다.

Render Tree는 화면에 표시될 요소들만 포함하여 각 요소가 화면에 어떻게 그려질지를 결정하게 된다.

예를 들어, display: none과 같은 요소는 화면에 표시되지 않으므로 Render Tree에 포함되지 않는 것이다.

 

 

4. Render Tree -> Layout(Reflow) -> Paint(Repaint)

웹 페이지의 구조가 어떻게 화면에 표시될지를 결정하며 이를 반영하여 실제로 화면에 그려진다.

 

Layout(Reflow)는 Render Tree가 완성되면 브라우저는 각 요소의 정확한 위치 및 크기를 계산하는 과정이다. 해당 단계에서 브라우저는 화면에 요소들이 어떻게 배치될 지를 결정하는 것이다.

 

Paint(Repaint)는 Layout 과정이 끝나고 브라우저가 각 요소를 화면에 실제로 그리는 작업을 말한다. 이 단계에서 요소의 색상, 폰트, 배경 등의 스타일이 적용되는 것이다. Repaint는 HTML이 변경될 때마다 즉 DOM이나 스타일이 변경될 때마다 발생한다.

 

만약 요소의 크기와 위치가 변하면 Reflow와 Repaint가 다시 발생되게 되는 것이다.

이때 Repaint가 과도하게 발생하면 성능 저하를 불러일으킬 수 있어 DOM 변경을 최소화하는 것이 좋다.

VDOM(Virtual DOM)으로 성능 최적화
VDOM은 DOM의 복사본으로 실제 DOM을 조작하기 전에 VDOM에서 변경 사항을 먼저 수행한다.
VDOM을 사용하게 되면 여러 번 DOM을 변경하지 않고 VDOM에서 먼저 수행하여 하나의 큰 변경으로 수행되게 할 수 있다. 
이런 과정으로 진행되면 브라우저는 여러 번의 Repaint를 수행하지 않고 한 번의 큰 Repaint만 수행되어 성능을 향상시킬 수 있다. 

 

 

5. HTML + CSS가 웹브라우저에서 유저에게 표기 완료되면 JavaScript를 통해 인터렉션 이벤트 적용

JavaScript는 이벤트 처리 및 웹페이지의 동적인 기능을 수행하도록 한다.

브라우저는 기본적으로 HTML과 CSS를 로드하고 Render Tree를 생성한 후 JavaScript를 실행한다.

Time to Interactive(TTI) : 웹페이지가 완전히 로드되고, 사용자가 상호작용할 수 있는 상태가 될 때까지의 시간(HTML + CSS 로드 뒤 JS 를 통해 마우스 이벤트 등 비로소 적용됐을때)