브라우저 개념 및 랜더링 원리

브라우저란 ?

쉽게 말해, 인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고 문서 검색을 도와주는 응용 프로그램이다.

브라우저의 종류로는 Google Chrome, Apple Safari, Nava Whale, Microsoft Edge 등이 있다.

 

사용자가 특정 웹사이트를 접근한다고 가정할 때 다음과 같은 과정을 거칠 수 있다.

1. 사용자가 브라우저를 실행
2. 접속하고 싶은 사이트의 url를 주소창에 입력
3. 브라우저는 입력된 url의 서버에게 사이트 정보를 받아와 이를 화면에 표시
4. 표현된 정보를 사용자가 활용

즉, 사용자가 보고자 하는 페이지를 서버에 요청하고 서버로부터 받은 응답(HTML, CSS, Javascript 등)을 브라우저에 표시하는 것이다.

 

 

---

 

 

브라우저의 랜더링 원리

브라우저가 화면에 나타나는 요소를 랜더링 할 때, 웹킷이나 게코 등과 같은 렌더링 엔진을 사용한다.

랜더링 엔진이 HTML, CSS, Javascript로 랜더링 할 때 CRP(Critical Rendering Path)라는 프로세스를 사용하며 다음 단계로 이뤄진다.

 

랜더링이란? (Rendering)

서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다.

요청 → 트리 생성 → Layout → repaint

1. HTML을 파싱하여 DOM 트리를 만든다.
2. CSS를 파싱하여 CSSOM 트리를 만든다.
3. DOM과 CSSOM을 결합하여 랜더링 트리를 만든다.
4. 랜더링 트리에서 각 노드의 크기와 위치를 계산한다.
5. 개별 노드를 화면에 그린다.

 

Parsing이란? : HTML 파일을 해석하여 DOM Tree를 구성하는 단계

 

 

 

브라우저 랜더링 방식

• SSR: Server Side Rendering
  • 서버 쪽에서 랜더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식
• CSR: Client Side Rendering
  • 서버가 요청을 받으면 클라이언트에 HTML과 JS를 보내줌. 이를 받아 랜더링 시작