사용자가 브라우저에서 특정 사이트를 요청하고 사이트가 완전히 렌더링되고 상호작용 가능한 상태가 될 때까지 동작 방식
URL 탐색 -> DNS 조회 -> TCP 핸드셰이크 -> TLS 핸드셰이크 -> 서버에서 응답 줌 -> 클라이언트에서 응답으로 받은 데이터 파싱 -> 렌더트리 생성 및 화면에 그림 -> 이후 사용자의 상호작용 처리
1. 탐색:
사용자가 브라우저 주소창에 URL을 입력 등
2. DNS 조회:
- DNS(Domain Name System) 서버에 조회 한다. ( 도메인을 전달하고 웹서버의 IP 주소를 알아내기 위해)
- 이때, 이전에 방문한 사이트의 IP 주소는 일정 기간 동안 캐시되어 재조회를 최소화한다.
3. 웹서버와 TCP 핸드셰이크:
- 브라우저와 서버의 소통을 통해 연결을 설정 (실제 데이터 전송 이전에, 즉 데이터 전송을 준비하는 과정)
- 이 과정에서 SYN, SYN-ACK, ACK 세 가지 메시지를 교환 한다.
4. TLS 핸드셰이크:
- HTTPS를 이용하기 위한 또 다른 핸드셰이크
- 암호화에 사용할 키 및 알고리즘을 결정한다.
- 데이터 전송 전에 안전한 연결이 이루어지도록 함
** TCP, TLS 핸드셰이크 이미지로 보기:
5. 서버로 부터 응답(Response):
- 웹서버가 클라이언트에 필요한 데이터를 응답으로 전송
- 클라이언트는 확인 응답(acknowledgements, ACKs)을 보내면서 데이터의 수신을 확인
6. 구문 분석(파싱) 및 렌더링 전 처리:
- 브라우저는 HTML, CSS, JavaScript를 구문 분석하여 DOM 트리 및 CSSOM을 생성
- 이는 페이지를 렌더링하기 전에 필요한 전처리과정으로, 화면에 어떻게 나타날지를 결정
** HTML 파싱 및 DOM 트리 구축 -> 메인 쓰레드에서 처리 O
** CSS 파싱 및 CSSOM 트리 구축 -> 메인 쓰레드에서 처리 X , 브라우저는 병렬로 CSS 파일을 다운로드하고 파싱하며, 이를 위해 별도의 쓰레드 또는 프로세스를 사용
** CSSOM는 성능 향상에 큰 기여를 하지 않는다. -> CSSOM을 만드는데 드는 시간은 일반적으로 한 번의 DNS 조회를 하는 시간보다 짧기 때문이다.
7. 자바스크립트 실행:
- 자바스크립트 코드를 해석, 컴파일하여 실행. 결과를 메인 쓰레드에 전달. (분석 결과물을 인터프리터에 넘긴다. -> 메인쓰레드에서 실행할 수 있는 바이트 코드가 생성된다.)
- 프리 스캐너에 의해 자바스크립트 파일이 다운로드되며, 실행 시간에 렌더링을 방해하지 않도록 비동기적으로 처리
8. 렌더 트리 생성:
DOM 트리와 CSSOM이 합쳐져 렌더 트리를 생성
- 스타일과 레이아웃을 결정. 이는 메인 쓰레드에서 수행된다.
9. 페인팅(화면 그리기):
렌더 트리를 기반으로 화면에 텍스트, 색상 등을 그려 최종적인 렌더링을 수행
이 단계에서 실제 화면이 사용자에게 표시
10. 상호 작용:
사용자와의 상호 작용을 처리하며, 지연된 자바스크립트가 다운로드되면 해당 코드를 실행 하기도 한다.
이는 웹페이지가 동적으로 반응하고 사용자 입력에 응답할 수 있는 단계.
** TTI(Time to Interaction):
- DNS 조회와 SSL 연결이 이루어지는 첫 요청부터 페이지가 상호작용할 준비가 될 때까지 얼마나 걸리는지를 측정하는 단위
- 데이터의 유효 기간을 나타내는 TTL과는 다름
