2023. 1. 16. 15:25ㆍCS/네트워크
생성일: 2023년 1월 14일 오후 6:11
태그: 웹
🏳️ 브라우저 렌더링
❓ 브라우저 렌더링은 무엇일가요?
일단 나는 브라우저로 크롬을 사용하는 편이다. 크롬이 편리한 기능이 많고, 깔끔하고, 탭관리가 수월하고, 많은 웹사이트가 크롬을 지원하기 때문이다. 근데 브라우저는 뭘까?
웹 브라우저 (Web Browser) 혹은 브라우저는 웹에서 페이지를 검색하고 표시하며 사용자가 하이퍼링크를 통해 추가 페이지에 접근할 수 있도록 하는 프로그램입니다.
❓ 그렇다면 브라우저 렌더링은 무엇일까요?
사용자가 웹 브라우저를 통해 자원을 서버에 요청하고 브라우저에 서버로 부터 파일(HTML, CSS, JAVASCRITP)을 받아 표시 되는 과정
서버로 부터 받아오는 파일은 HTML 문서 이외 다른 형태의 파일 (PDF 등..) 일수도 있다. 자원의 주소는 URI에 의해 정해진다.
렌더링 엔진
- 브라우저 렌더링은 브라우저에 렌더링 엔진으로 처리된다.
- 렌더링 엔진의 역할은 요청받은 내용을 브라우저 화면에 표시하는 일이다.
- 파이어 폭스는 Geoko 엔진을 사용하고 크롬과 사파리는 Webkit 엔진을 사용한다.
그럼 이제 브라우저 렌더링의 자세한 과정을 살펴 보자.
🌐 브라우저 렌더링 동작 과정
- DOM 트리 구축을 위한 HTML 파싱 ( Parsing )
- 렌더 트리 구축
- 렌더 트리 배치
- 렌더 트리 그리기
렌더링 엔진은 HTML문서를 파싱 후 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱한다. 스타일 정보와 HTML표시 규칙은 “렌더 트리”라고 불리는 또 다른 트리를 생성한다.
렌더트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시된다.
렌더트리 생성이 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위체에 표시되는 것을 의미한다.
일련의 과정들이 점진적으로 진행된다는 것을 아는 것이 중요하다. 렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다.
네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.
더 자세한 내용은 https://d2.naver.com/helloworld/59361를 참조 하시고,,,
그럼 아래에 대한 질문도 한번 생각 해 볼 수 있을것 같다.
➕ 브라우저에 www.google.com를 치면 무슨일이 일어날까요?
( 브라우저 렌더링에 관한 것 요청에 관한 자세한 내용은 다음에 …)
🌐 브라우저 렌더링 방식에 따른 웹 형태
🔎MPA vs SPA
MPA : Multi Page Application
- MPA는 여러개의 page (HTML) 로 구성된 Application이다.
- MPA는 SSR 방식으로 렌더링 한다❗따라서 페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링 한다.
- ❓새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스가 다운로드 된다.
👍 여러개의 page로 구성되어 SEO 관점에서 유리하다.
❗SEO : 검색엔진이 웹을 크롤링 하면서 페이지에 컨텐츠 색인을 생성하는 과정
👍 첫 페이지 로딩이 매우 짧다.
❓ 서버에서 이미 랜더링해 가져오기 때문이다.
그러나 클라이언트가 JS 파일을 모두 다운로드하고 적용하기전 까지는 각각의 기능은 동작하지않는다.
👎 새로운 페이지를 이동하면 깜빡인다. (UX 관점에서 불리)
👎 페이지 이동시 불필요한 템플릿도 중복해서 로딩한다.
👎 서버 렌더링에 따른 부하가 발생함
👎 모바일 앱 개발시 추가적인 백엔드 작업이 필요함. → 생산성이 복잡해 질 수 있음
SPA : Single Page Application
- SPA는 한 개의 page (HTML) 로 구성된 Application이다.
- SPA는 CSR 방식으로 렌더링 한다.
- 한 번에 모든 리소스 파일 ( 하나의 HTML 파일 모든 JS 파일 ) 을 로딩한다.
- 그 이후에는 Client가 요청한 데이터를 받아올 때만로 서버와 통신한다.
- 첫 요청시 딱 한페이지만 불러오고 페이지 이동 시에 새로고침이 발생하지 않고 기존 DOM을 수정해서 보여주는 방식이다.
- 필요한 부분만 서버와 갱신하기 때문에, 자연스러운 페이지 이동과 UX를 제공할 수 있다.
- ReactJs AngularJs VueJs 등 많은 프레임 워크들이 SPA방식을 채택함
👍 자연스러운 사용자 경험 UX
페이지 이동이 발생하지 않기 때문에 깜빡 거림이 없다.
👍 필요한 리소스만 부분적으로 로딩한다.
SPA는 서버에게 정적리소스를 한 번만 요청한다. 그리고 받은 데이터는 전부 저장해둔다.
👍 컴포넌트별 개발 용이 ( 생산성 )
웹 컴포넌트 기술을 사용한다.
👎 JS 파일을 번들링 해서 한 번에 받기 때문에 초기 구동 속도가 느리다.
❗ Webpack의 code splitting 으로 해결 가능
👎 검색 엔진 최적화 (SEO ) 가 어려움
❗SSR 방식을 이용해서 해결가능
👎 보안 이슈
🔎CSR vs SSR
SSR : Server Side Rendering
MPA에서 사용하는 렌더링 방식이다. 웹의 초기 부터 여러 페이지를 갖는 MPA형태의 웹사이트가 서비스 해왔다.
MPA는 페이지를 이동할 때 마다 새로운 페이지를 요청한다. 모든 템플릿은 서버 연산을 통해서 렌더링 하고 완성된 페이지 형태로 응답한다. 이 과정을 서버사이드렌더링이라고 부른다. ( JSP, NODE PUG, EJS )
서버사이드 렌더링의 장점은 SEO이다. 전통적인 MPA의 경우 브라우저에서 JS 코드가 동작하기 전에도 완성된 형태의 템플릿을 서버로 부터 전달 받는다. 이 때문에 검색엔진이 페이지를 크롤링하기 매우 적합하다.
CSR : Client Side Rendering
최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링 하는 방식이다.
하나의 HTML 파일과 모든 JS 파일을 같이 불러 오기 때문에 초기 로딩 속도가 느리다. 하지만 한 페이지이기 때문에 새로고침이 일어나지 않고, 사용자 경험에서 이득을 볼 수 있다.
클라이언트 관점에서 필요한 부분만 데이터를 요청해서 바꾸기 때문에 성능면에서 이득을 볼 수 있다. ( 클라이언트쪽에 하는 렌더링 )
그러나 한페이지로 이루어져있기 때문에 SEO 관점에서 크롤링하기 쉽지 않다.
😒 언제 무슨 렌더링 방식을 채택해야 할까요?
아래 표를 보고 왜 그런지 생각해 보자
| SSR | CSR |
|---|---|
| 상위 노출이 필요 할 때 | 개인정보 데이터를 기준으로 구성할 때 |
| 누구에게나 동일한 내용을 노출 할 때 | 보다 나은 UX를 제공할 때 |
| 페이지 마다 데이터가 자주 바뀔 때 | 상위 노출 보다 고객의 데이터 보호가 더 중요 할 때 |
☺️ 후기
이번 브라우저 렌더링과 웹 사이트 렌더링을 정리하면서 확실히 개념정리가 된것 같습니다.
왜 이런 기술이 사용되고, 프레임워크를 사용하는지 왜 이런게 더 필요하고 배워야 하는지 이유를 다져가는것 같아서 동기 부여도 되는것 같습니다.
출처
브라우저는 어떻게 동작하는가? : https://d2.naver.com/helloworld/59361
SPA vs MPA와 SSR vs CSR 장단점 뜻정리 : https://hanamon.kr/spa-mpa-ssr-csr-장단점-뜻정리/
'CS > 네트워크' 카테고리의 다른 글
| 브라우저에 www.google.com을 입력하게 된다면?? (0) | 2023.06.02 |
|---|---|
| 간단한 프로토콜 HTTP (0) | 2022.03.11 |
| 웹과 네트워크 계층 (0) | 2022.03.04 |