크리티컬 랜더링 패스(Critical Rendering Path)
웹 브라우저가 HTML, CSS, JavaScript 파일을 화면에 표시하기 위해 수행하는 일련의 과정이다. 이 과정은 웹 페이지가 사용자에게 보이기 시작할 때까지의 모든 단계를 포함하며, 최적화하면 페이지 로드 속도를 향상시킬 수 있다. 아래는 크리티컬 랜더링 패스의 각 단계에 대한 자세한 설명이다.
1. HTML 파싱 및 DOM 트리 생성
- HTML 파싱: 브라우저는 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다. 이 과정에서 HTML 문서는 브라우저가 이해할 수 있는 구조로 변환된다[1][3].
- DOM 트리: DOM 트리는 HTML 문서의 구조를 나타내며, 각 HTML 요소는 DOM 트리의 노드로 변환된다[1][4].
2. CSS 파싱 및 CSSOM 트리 생성
- CSS 파싱: 브라우저는 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 만든다. CSSOM은 스타일 정보를 담고 있으며, DOM과 결합되어 최종 렌더링에 사용된다[2][3].
- CSS 선언 방식: CSS는 내부(internal), 인라인(inline), 외부(external) 방식으로 선언될 수 있으며, 각각의 방식에 따라 DOM 객체로 변환된다[1].
3. 렌더 트리 생성
- 렌더 트리: DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 이 트리는 화면에 표시될 요소만 포함하며,
display: none속성을 가진 요소나<head>,<script>와 같은 태그는 제외된다[2][3]. - 스타일 적용: 렌더 트리는 DOM 요소와 일치하는 스타일 규칙을 기반으로 최종 스타일을 결정한다[2].
4. 레이아웃 계산
- 레이아웃: 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산한다. 이 단계에서는 페이지의 레이아웃이 결정된다[3].
5. 페인트 및 컴포지팅
- 페인트: 계산된 레이아웃 정보를 사용하여 화면에 픽셀을 그린다. 이 과정에서 색상, 텍스처, 그림자 등이 적용된다[3].
- 컴포지팅: 여러 레이어를 결합하여 최종 이미지를 생성하고 사용자에게 표시한다.
최적화 기법
크리티컬 랜더링 패스를 최적화하면 웹 페이지의 초기 렌더링 속도를 개선할 수 있다.
최적화 기법:
- 리소스 최소화 및 압축: HTML, CSS, JavaScript 파일을 최소화하고 압축하여 로드 시간을 줄인다.
- 비동기 로드 사용: 중요한 리소스를 우선적으로 로드하고 덜 중요한 스크립트는 비동기로 로드하여 초기 렌더링을 방해하지 않도록 한다.
- 이미지 최적화: 이미지 파일 크기를 줄이고 적절한 포맷을 사용하여 로딩 시간을 개선한다.
이러한 과정을 통해 웹 페이지는 사용자에게 더 빠르고 효율적으로 표시될 수 있다.
브라우저에 URL을 입력하고 웹사이트에 접속하는 과정
웹 브라우저에 URL을 입력하고 웹사이트가 화면에 표시되는 과정은 여러 단계로 이루어져 있다.
각 단계는 웹 페이지가 사용자에게 보이기 시작할 때까지의 모든 과정을 포함하며, 아래에 자세히 설명한다.
1. URL 입력 및 파싱
사용자가 브라우저의 주소창에 URL을 입력하고 Enter 키를 누르면 브라우저는 입력된 URL을 파싱하여 프로토콜, 도메인 이름, 경로 등을 추출합니다[9][11]. 이 과정에서 브라우저는 어떤 프로토콜(예: HTTP, HTTPS)을 사용할지 결정합니다[18].
2. DNS 조회
브라우저는 도메인 이름을 IP 주소로 변환하기 위해 DNS(Domain Name System)를 사용
- 로컬 캐시 확인: 브라우저와 운영 체제의 로컬 DNS 캐시에서 IP 주소를 찾는다[17][18].
- DNS 서버 요청: 캐시에 없으면 ISP의 DNS 서버에 도메인 이름에 대한 IP 주소를 요청한다.
필요에 따라 루트 DNS 서버, 최상위 도메인(TLD) DNS 서버 등을 통해 계층적으로 IP 주소를 찾는다[17][19].
다음과 같은 캐시를 순차적으로 확인하여 IP 주소를 찾는다: - 브라우저 캐시: 최근 방문한 웹사이트의 DNS 기록을 저장
- 운영 체제 캐시: 시스템 콜을 통해 운영 체제의 DNS 기록을 조회
- 라우터 캐시: 라우터가 유지하는 DNS 캐시를 조회
- ISP 캐시: 인터넷 서비스 제공자의 DNS 서버에서 캐시를 조회
캐시에 IP 주소가 없으면 ISP의 DNS 서버가 DNS 쿼리를 시작하여 도메인 이름의 IP 주소를 찾는다[9][11].
3. TCP 연결 설정
IP 주소를 얻은 후, 브라우저는 웹 서버와의 TCP 연결을 설정한다. 이 과정은 3-way handshake로 이루어지며, 클라이언트와 서버 간의 데이터 전송 준비를 위한 세션 수립 과정:
- 클라이언트가 서버에 SYN 패킷을 보낸다.
- 서버가 SYN+ACK 패킷으로 응답한다.
- 클라이언트가 ACK 패킷을 보내 연결이 설정된다[18].
4. HTTP 요청 및 응답
TCP 연결이 설정되면, 브라우저는 HTTP 요청(주로 GET 요청)을 서버에 전송한다. 이 요청에는 사용자가 요청한 리소스의 경로와 함께 필요한 헤더 정보가 포함된다[9][10]. 서버는 요청을 처리하고 HTTP 응답을 보낸다. 응답에는 상태 코드와 함께 요청한 리소스(예: HTML 문서)가 포함된다[18].
5. 서버 응답 처리
웹 서버는 요청을 처리하고 HTTP 응답을 보낸다. 응답에는 상태 코드와 함께 요청한 리소스(예: HTML 문서, JSON 데이터 등)가 포함된다[9][10].
6. 크리티컬 랜더링 패스
브라우저는 수신한 HTML 문서를 파싱하여 DOM 트리를 생성합니다. 이후 CSS 파일을 파싱하여 CSSOM 트리를 만들고, DOM과 CSSOM을 결합하여 렌더 트리를 생성한다:
- DOM 생성: HTML 문서를 파싱하여 DOM 트리를 만든다.
- CSSOM 생성: CSS 파일을 파싱하여 CSSOM 트리를 만든다.
- 렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리를 생성하고 스타일을 적용한다.
- 레이아웃 계산: 각 요소의 위치와 크기를 계산한다.
- 페인트 및 컴포지팅: 계산된 정보를 사용해 화면에 픽셀을 그린다[18].
7. 웹 페이지 렌더링 완료
브라우저는 모든 리소스를 로드하고 렌더링 과정을 완료하여 사용자에게 웹 페이지를 표시한다. 추가적인 리소스(이미지, 폰트 등)가 필요하면 해당 리소스에 대한 추가 HTTP 요청이 발생할 수 있다[18].
이러한 과정을 통해 사용자는 웹 페이지를 볼 수 있게 되며, 각 단계는 페이지 로딩 속도와 사용자 경험에 중요한 영향을 미친다.
Citations:
[1] https://skm1104.tistory.com/79
[2] https://jinyisland.kr/post/crp/
[3] https://velog.io/@yoondengo/Critical-Rendering-Path%EB%9E%80-Rendering-Engine
[4] https://velog.io/@ybj1227/%ED%8C%8C%EC%8B%B1%EA%B3%BC-DOM%ED%8A%B8%EB%A6%AC-%EA%B5%AC%EC%B6%95
[5] https://chicori3.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-DOM
[6] https://porolog.tistory.com/20
[7] https://yceffort.kr/2021/11/jorney-from-tags-to-dom
[8] https://velog.io/@as13ljh/Critical-Render-Path%EB%9E%80
[9] https://systemdata.tistory.com/94
[10] https://253eosam.oopy.io/post/input-url-on-the-browser
[11] https://velog.io/@gyumin_2/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC-%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90-URL-%EC%9E%85%EB%A0%A5-%EC%8B%9C-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94-%EA%B3%BC%EC%A0%95-%EB%B0%B1%EC%97%94%EB%93%9C-%ED%8E%B8
[12] https://1-7171771.tistory.com/134
[13] https://deveric.tistory.com/97
[14] https://aws.amazon.com/ko/blogs/korea/what-happens-when-you-type-a-url-into-your-browser/
[15] https://gunu-dev.tistory.com/entry/%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90-URL%EC%9D%84-%EC%9E%85%EB%A0%A5%ED%95%98%EB%A9%B4-%EB%AC%B4%EC%8A%A8-%EC%9D%BC%EC%9D%B4-%EC%9D%BC%EC%96%B4%EB%82%A0%EA%B9%8C
[16] https://f-lab.kr/insight/web-browser-url-process
[17] https://www.cloudflare.com/ko-kr/learning/dns/what-is-dns/
[18] https://programmer7895.tistory.com/55
[19] https://sudo-minz.tistory.com/184
[20] https://aws.amazon.com/ko/blogs/korea/what-happens-when-you-type-a-url-into-your-browser/
[21] https://kghworks.tistory.com/126
[22] https://lecor.tistory.com/78
[23] https://velog.io/@gyumin_2/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC-%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90-URL-%EC%9E%85%EB%A0%A5-%EC%8B%9C-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94-%EA%B3%BC%EC%A0%95-%EB%B0%B1%EC%97%94%EB%93%9C-%ED%8E%B8
[24] https://hanamon.kr/dns%EB%9E%80-%EB%8F%84%EB%A9%94%EC%9D%B8-%EB%84%A4%EC%9E%84-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EA%B0%9C%EB%85%90%EB%B6%80%ED%84%B0-%EC%9E%91%EB%8F%99-%EB%B0%A9%EC%8B%9D%EA%B9%8C%EC%A7%80/
