웹 페이지가 랜더링되는 과정

웹페이지가 랜더링 되는 과정을 알아보자.

 

1. 우선 웹 페이지 접속시 URL을 기반으로 웹 서버와 HTTP 통신을 통해서 요청(Request)을 보낸다.

2. 서버는 요청에 대한 응답(Response)으로 HTML, CSS, JavaScript, IMG 와 같이 페이지를 구성하는 파일로 응답한다.

3. 브라우저는 HTML 문서, CSS 파일을 파싱하여, DOM트리와 CSSOM 트리를 결합하여, 렌더트리를 생성한다.

4. 랜더트리에서 노드들의 레이아웃을 계산하고 브라우저가 레이아웃과 페인팅 작업을 수행하며 화면에 웹페이지를 랜더링한다.

위와 같이 페이지가 랜더링 되기 위해서는 HTML과 CSS가 중요한 역할을 하게된다.

HTML은 웹 페이지의 구조를 결정하고, CSS는 웹페이지의 디자인과 레이아웃을 결정한다.

그러므로 개발자들은 사용자(UX)의 관점에서 개발할 수 있도록 해야한다.

 

 

 

*파싱(parsing)

프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석(syntax analysis)을 하는 단계이다. 파일의 문자열들을 문법적 의미를 갖는 최소 단위인 '토큰'으로 분해하고, 이 토큰들을 문법적 의미와 구조에 따라 노드라는 요소로 만든다. 노드들은 상하관계를 반영해 트리를 형성하는데, 이 트리를 파스트리라고 한다.

 

*랜더링(rendering)

HTML, CSS, JavaScript 파일을 파싱해, 브라우저에 시각적으로 출력하는 과정이다.