브라우저 렌더링은 무엇일까.

SSR,CSR 개념을 공부하면서 마주할 수 있는 개념중에 장,단점을 이해 하려고 해봤지만 쉽게 이해되지 않는 개념이었습니다. 특히, 초기 렌더링 속도의 차이를 이해할 때 더더욱 어려웠습니다. 이유는, 렌더링을 이해하지 못하고있어서 였습니다. 여태까지 렌더링은 HTML 파일이 다운로드 된 시점으로 생각하고있었습니다. 이건 크나큰 착각이었습니다. 렌더링이 무엇인지부터 알았으면 이런 무지는 없었을것같아요.

 

렌더링이 무엇이고, 렌더링이 빠르다, 느리다의 기준은 어떤게 있는지 알아보면서 브라우저, 웹, 프론트엔드의 기초를 정리해보려고 합니다.

렌더링이란?

렌더링은 브라우저가 서버로부터 받은 HTML, CSS, JavaScript 파일을 사용자가 볼 수 있는 시각적 콘텐츠로 변환하는 과정입니다. 브라우저는 이 파일들을 해석하여 DOM(Document Object Model), CSSOM(CSS Object Model)을 생성하고, 이 두 모델을 결합하여 최종적으로 화면에 보여줄 내용을 만듭니다. 이 과정은 웹 페이지의 첫 번째 화면이 표시되는 시간(초기 렌더링 속도)에 큰 영향을 미칩니다.

HTML 파일을 요청하기까지 단계

1. URL 입력
   사용자가 URL을 입력하거나 링크를 클릭하면, HTTP 또는 HTTPS 프로토콜을 사용해 서버로 요청이 전송됩니다. 이 요청은 웹 브라우저와 서버 간의 데이터 전송을 시작하는 첫 단계입니다.
2. DNS 조회
   사용자가 입력한 URL은 사람이 읽기 쉽게 만든 도메인 이름입니다. IP주소랑 영문으로된 주소랑 맵핑되어있습니다. 이 도메인을 IP 주소로 바꿔서 요청해야해서, DNS 서버에 쿼리해 도메인을 IP 주소로 변환합니다.
3. TCP 연결
   클라이언트랑 서버 간 데이터를 전송하기 위해 TCP 연결을 설정합니다. 이때 "3-way handshake"라는 과정을 통해 연결을 설정하는데, 클라이언트와 서버가 세 번의 메시지를 주고받으며 연결을 확인합니다. 이는 데이터의 안정적인 전송을 보장하는 중요한 과정입니다.
4. TLS 핸드셰이크 (HTTPS일 경우)
   요청이 HTTPS라면, 통신을 암호화하기 위해 TLS 핸드셰이크 과정을 거칩니다. 이 과정에서는 클라이언트와 서버가 여러 번의 요청과 응답을 주고받으며 인증서를 검증하고, 세션 키를 교환하여 안전한 통신을 설정합니다.
5. HTML 파일 요청 및 응답 서버는 클라이언트의 요청에 응답하여 HTML 파일을 브라우저에 전송합니다. 브라우저는 HTML 파일을 받아들여 파싱(parsing) 작업을 시작하고, HTML 태그들을 DOM 트리로 변환합니다.
6. 추가 리소스 요청 및 렌더링 준비
   HTML 파일을 파싱하는 과정에서, 브라우저는 추가로 필요한 CSS, JavaScript, 이미지, 폰트 등의 리소스들을 다시 서버에 요청합니다. CSS 파일은 CSSOM으로 파싱되고, JavaScript 파일은 브라우저의 JavaScript 엔진을 통해 실행됩니다. 이후 DOM과 CSSOM이 결합되어 렌더 트리가 생성되고, 이 렌더 트리 기반으로 실제 화면에 요소들이 그려집니다.

정리하면,

렌더링은 HTML,CSS,Javascript, 그리고 폰트, 미디어 파일을 사용자가 볼 수 있는 시각적인 콘텐츠로 변환하는 과정을 말합니다.

특정 링크를 클릭하거나, 주소표시줄에 영문으로 된 URL을 입력하면 get 요청과 함께 DNS 서버에 맵핑되어있는 URL 주소를 IP로 변환합니다.

해당 IP에 등록된 서버와, 클라이언트가 핸드쉐이크로 연결을 확인하고, 안전한 통신이 되도록 설정합니다. 연결이 완료된 클라이언트는 서버에 HTMl 파일을 요청해 응답 받으면 HTML 코드를 DOM 으로 변환하면서 추가로 필료한 CSS,Javscript,이미지,폰트 파일들을 다시 서버에 요청해 응답 받습니다.

이때 받은 CSS파일은 CSSOM으로 기존의 DOM과 함께 render tree가 생성되고, render tree 기반으로 화면에 요소들이 그려집니다.