브라우저 동작 방식

나랭·2024년 9월 21일

DOM web

웹사이트에 접속했을 때 브라우저는 어떻게 동작하는가?

웹 페이지를 로딩하는 첫 단계

사용자가 주소창에 URL을 입력하거나, 링크를 클릭하고, 폼을 제출하는 등의 동작을 통해 요청 보내면 발생

먼저, 브라우저가 DNS 조회를 요청

해당 페이지의 자원이 어디에 위치하는지를 찾기 위해서!
DNS(Domain Name System) : 도메인의 이름을 IP 주소로 변환하여 주는 시스템

IP 주소를 찾아서 응답

이때 IP는 일정 시간동안 캐시되어 후속 요청 속도 높임

IP 주소를 통해 브라우저는 서버와 TCP 3 way handshake로 연결

데이터를 전송하기 전에 브라우저와 웹 서버가 TCP 소켓 연결
이때 HTTPS의 경우 보안성 있는 연결을 위해 또 다른 핸드쉐이크가 필요 → TLS 협상
- TCP layer의 3-way handshake + SSL Handshake
  
  사진 출처(Cloudflare)

2. 응답(Response)

브라우저는 유저 대신에 초기 HTTP GET request를 보냄

웹 사이트는 대게 HTML 파일을 요청

서버가 요청을 받으면 관련 응답 헤더와 함께 HTML 내용을 응답

TCP 슬로우 스타트 알고리즘을 이용

TCP 패킷은 전송 중에 세그먼트로 분할됨 → TCP는 패킷의 순서를 보장하기 때문에 서버는 일정 개수의 세그먼트를 전송한 후 클라이언트로부터 ACK 패킷 형태로 승인을 받아야 함
- 서버가 각 세크먼트마다 ACK를 기다리면 클라이언트로부터 ACK가 빈번하게 발생하는 문제
- 반면 서버가 너무 많은 세그먼트를 보내면 클라이언트가 세그먼트를 받을 수 없어 서버가 계속 세그먼트를 재전송하는 문제 발생
전송되는 세그먼트 수의 균형을 맞춰야 함! → 최대 네트워크 대역폭이 결정될 때까지 전송되는 데이터의 양을 점차적으로 늘리고 네트워크 부하가 높은 경우 전송되는 데이터의 양을 줄임

3. 구문 분석(Parsing)

브라우저가 첫 번째 데이터의 청크를 받으면 구문 분석을 진행

구문 분석 : 브라우저가 네으퉈크를 통해 받은 데이터를 DOM이나 CSSOM으로 바꾸는 단계

가장 먼저 HTML을 처리해서 DOM 트리를 만들기

HTML 구문 분석은 토큰화와 트리 생성을 포함
- HTML 토큰 : 시작 및 종료 태그, 속성 이름 및 값을 포함
- DOM 트리 : HTML 태그가 루트 노드
프리로드 스캐너(Preload scanner)
- 브라우저가 DOM 트리를 만드는 프로세스는 메인 스레드를 차지함 → 이때 프리로드 스캐너가 사용 가능한 콘텐츨르 분석해서 CSS, Javascript, 웹 폰트, 이미지와 같이 우선 순위가 높은 외부 자원에 대한 참조를 찾아 미리 요청함 → 구문 분석기가 요청되는 자원에 다다를때 쯤이면 이미 그 자원들을 전송받고 있거나 이미 전송받은 후이므로 최적화를 통해 blocking을 줄여줌

CSS를 처리해서 CSSOM 트리를 만들기

DOM과 CSSOM은 독립적인 자료구조

Javascript 컴파일

CSS가 분석되고 CSSOM이 생성되는 동안, 프리 스캐너 덕분에 Javascript 파일 같은 다른 자원도 다운로드되어 Javascript의 경우 추상 구문 트리로 구문 분석됨

접근성 트리 구축

브라우저는 접근성 트리를 만들어 보조장치가 내용을 해석하는 것을 도움
AOM(접근성 객체 모델)은 DOM의 의미 버전으로 AOM이 만들어지기 전까지 화면 리더기는 컨텐츠에 접근 불가능

DOM(Document Object Model)이란?

브라우저에서는 HTML코드를 DOM(Document Object Model)이라는 객체형태의 모델로 저장

-> 그렇게 저장된 정보를 DOM Tree라고 함

HTML을 바탕으로 트리 형태로 구성된다.

div, span, a 등의 element뿐만 아니라 text와 같은 정보도 하나의 node로 구성된다.

DOM 구성 요소

문서 노드(Document Node) - 최상위 트리이자 접근의 시작점이다.

요소 노드(Element Node) - HTML 요소를 표현한다.

속성 노드(Attribute Node) - HTML 요소의 속성을 표현한다.

텍스트 노드(Text Node) - HTML 요소의 텍스트를 표현한다. 자식을 가질 수 없다.

Tree 구조의 자료구조로 '탐색', '변경(추가,삭제,교체)'이 가능하다.