브라우저 작동원리와 SSR / CSR

브라우저의 기본 구조

1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
3. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행.
7. 자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

위의 구조에서 브라우저가 화면을 그리는 핵심인 렌더링 엔진을 살펴봅시다.

렌더링 엔진은 요청 받은 내용을 화면에 출력해주는 일을 합니다.

브라우저 렌더링 엔진의 동작 과정 

1. 렌더링 엔진은 HTML 문서를 parsing 하고 DOM 트리를 구축

2. css를 parsing 해서 CSSOM 트리(style rules)를 만들고

3. 위 두가지를 합쳐서 웹의 청사진과 같은 Render Tree를 만들어냄 , 이걸 가지고 실제 화면을 그리게 됨

4. 이 요소를 가지고 요소들이 브라우저의 어느 위치에 배치 될지 Layout을 그림

5. painting -> display

parsing 은 렌더링 엔진에서 중요한 부분, 문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미함

이 파싱은 어휘 분석과 구문 분석을 진행, 그리고 CSS와 JS 를 파싱하는 데 사용됨.

근데 display 까지 다 끝마치고 DOM 에 새로운 변화가 생긴다면? ex) 새로운 요소의 추가, 삭제, 위치 변경, 크기변경 등

4. Layout을 그리는 과정이 다시 반복됨

레이아웃 변경이 없는 color, background-color 같은 것은 painting 만 다시함.

 

위의 이미지를 통해 SPA 와 MPA 의 차이를 직관적으로 이해하기 좋습니다.  

CSR(Client Side Rendering)

- SPA 는 말그대로 Single page 단 하나의 HTML 파일을 유지하는 웹서버를 뜻합니다. 예를 들어 위 이미에서 가장 좌측의 전체가 파란 컴포넌트로 채워진 최초의 페이지를 렌더링 한 이후에는 페이지의 이동이 있을 때 변경이 없는 컴포넌트들은 유지한 채로 분홍색, 초록색의 부분만 JS 를 이용해서 구성요소를 렌더링 하는 방식이 CSR입니다.

SSR(Server Side Rendering)

- 반면 SSR 은 페이지가 여러개입니다. 이렇게 되어 있으면 페이지 이동시 마다 새로운 페이지의 HTML을 전부 다시 그려서 렌더링 해주어야 하기 때문에 속도가 느린 단점이 있습니다.

 

*참고*

브라우저 구동 원리

https://d2.naver.com/helloworld/59361 

https://poiemaweb.com/js-browser

https://poiemaweb.com/js-hello-world

https://www.youtube.com/watch?v=mfzRXKUQCvY

https://velopert.com/3236

 

chrome 에서 디버깅하기

https://developer.chrome.com/docs/devtools/console/