브라우저 랜더링 과정 (+서버 Data 받아오는 과정)

---

브라우저 랜더링

브라우저 랜더링 과정은 웹 페이지를 표시하기 위해 브라우저가 수행하는 단계와 프로세스를 의미한다. 

 

 

1. HTML 파싱: 브라우저는 웹 페이지의 HTML 문서를 가져와서 파싱한다. 이 과정에서 HTML 문서의 구조를 이해하고 DOM(Document Object Model) 트리를 생성한다. DOM 트리는 웹 페이지의 요소(태그, 속성 등)와 그들의 관계를 표현한다.
2. CSS 파싱 및 스타일 계산: 브라우저는 HTML 파싱 후에 CSS 스타일 시트를 가져와서 파싱한다. 각 요소에 대한 스타일 정보를 추출하고, 스타일 계산을 통해 각 요소의 최종 스타일을 결정한다. 이렇게 계산된 스타일은 렌더 트리(Render Tree)라는 새로운 트리 구조에 저장된다.
3. 레이아웃(Layout): 브라우저는 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산한다. 이 과정을 레이아웃 또는 리플로우(reflow)라고도 부른다. 브라우저는 각 요소가 어디에 표시되어야 하는지 계산하고, 이를 브라우저 창에 배치한다.
4. 페인팅(Paint): 레이아웃이 완료되면 브라우저는 화면에 각 요소를 그린다. 이 과정을 페인팅이라고 하며, 렌더링 엔진은 픽셀을 채우고 색상, 그림자, 글꼴 등을 적용하여 최종적으로 화면에 그림을 그린다.
5. 렌더링 결과 표시: 브라우저는 페인팅된 결과물을 화면에 표시한다. 이 단계에서 사용자는 최종적으로 웹 페이지를 볼 수 있다.
6. 상호작용 및 이벤트 처리: 웹 페이지가 렌더링되고 표시되면 사용자의 상호작용 및 이벤트(마우스 클릭, 키보드 입력 등)을 처리한다. 이벤트 핸들러를 실행하여 사용자가 요청한 작업을 수행한다.

 

 

 

서버 Data는 언제 받아올까?

브라우저가 랜더링되는 과정 중에서 서버에서 데이터를 받아오는 과정은 "HTML 파싱"단계에서 이뤄진다. 

 

1. 서버 요청: 브라우저는 웹 페이지를 요청하기 위해 웹 서버에 HTTP 요청을 보낸다. 이 요청에는 웹 페이지의 URL 및 기타 필요한 정보가 포함된다.
2. 서버 응답: 웹 서버는 브라우저의 요청을 받고, 웹 페이지의 HTML 문서를 포함한 응답을 생성하여 브라우저로 보낸다. 이 응답은 HTTP 응답 헤더와 본문으로 구성된다.
3. HTML 파싱: 브라우저는 서버로부터 받은 HTML 문서를 파싱하여 DOM (Document Object Model) 트리를 생성한다. 이 단계에서 HTML 문서의 구조와 내용을 이해하고, 웹 페이지의 요소와 그들의 관계를 표현하는 트리 구조를 생성한다.
4. CSS 및 JavaScript 파일 요청: HTML 파싱 중에 브라우저는 외부 CSS 및 JavaScript 파일을 만나면 해당 파일을 다운로드하기 위해 추가로 서버에 요청을 보낸다. 이 파일들은 웹 페이지의 스타일과 동작을 정의하므로 중요하다.
5. 파일 다운로드: 서버에서 CSS 및 JavaScript 파일을 다운로드한 후, 브라우저는 이러한 파일을 파싱하고 실행한다. 이것은 웹 페이지의 스타일과 상호작용을 구현하는 데 사용된다.