브라우저는 어떻게 동작하는가?

브라우저의 동작 과정은 크게 탐색(Navigation) -> 응답(Response) -> 구문 분석(Parsing) -> 렌더(Render) 과정으로 이루어집니다.

Navigation

탐색(Navication)은 웹 페이지 로딩 과정에서의 첫 번째 단계입니다. 이것은 사용자가 웹 페이지를 요청할 때 주소 표시줄에 URL 주소를 입력하거나 링크를 클릭하거나 폼을 제출하는 등의 동작을 포함합니다.

웹 성능을 향상시키는 것 중 하나는 네비게이션을 완료하는 데 걸리는 시간을 최소화하는 것입니다.

DNS lookup

웹 페이지의 탐색 과정에서 첫 번째 단계는 해당 페이지의 자원(assets)이 어디에 위치하는지 찾는 것입니다. 예를 들어, https://sungbinlee.dev을 방문한다고 가정하면 해당 HTML 페이지는 168.126.63.1 이라는 IP 주소를 가진 서버에 저장되어 있을 것입니다. 그러나 사용자가 이 사이트를 이전에 한 번도 방문한 적이 없다면, DNS 조회(DNS lookup)가 필요합니다.

여러분의 웹 브라우저는 DNS 조회를 요청하며, 이 요청은 최종적으로 이름 서버에 의해 처리되고 IP 주소로 반환됩니다. 이 초기 요청 이후에 해당 IP 주소는 캐시에 저장되어, 다음 요청 시 이름 서버에 다시 연락하지 않고도 캐시에서 IP 주소를 검색하여 속도를 향상시킵니다.

한 페이지 로딩에 대해 호스트 이름(hostname)당 DNS 조회는 한 번만 필요합니다. 그러나 요청한 페이지에서 참조하는 각 고유한 호스트 이름에 대해 DNS 조회가 수행되어야 합니다. 예를 들어, 글꼴, 이미지, 스크립트, 광고 및 측정 요소가 모두 서로 다른 호스트 이름을 가지고 있다면, 각각에 대해 DNS 조회가 수행되어야 합니다.

TCP handshake

IP 주소를 알게 되면, 브라우저는 서버와의 통신을 위한 TCP의 3 Way-Handshake를 통해 연결을 설정합니다. 이 메커니즘은 브라우저와 웹 서버와 같이 통신을 시도하는 두 entity가 데이터를 전송하기 전에 네트워크 TCP 소켓 연결의 매개변수를 협상할 수 있도록 설계되었습니다. 이 과정은 주로 HTTPS를 통해 데이터를 전송하기 위해 사용됩니다.

TCP의 세 단계 핸드셰이크 기술은 종종 “SYN-SYN-ACK” 또는 보다 정확하게 “SYN, SYN-ACK, ACK”로 참조됩니다. 이는 두 대의 컴퓨터 간의 TCP 세션을 협상하고 시작하기 위해 TCP에 의해 전송되는 세 개의 메시지가 있는데, 이는 각 서버 간에 세 번의 메시지 교환을 의미하며 아직 요청이 이루어지기 전의 단계입니다.

TLS negotiation

HTTPS를 통한 더 안전한 연결을 확립하려면 추가적인 “핸드셰이크”가 필요합니다. 이 핸드셰이크 또는 TLS 협상은 통신을 암호화하는 데 사용될 암호화 알고리즘을 결정하고, 서버를 인증하며 실제 데이터 전송을 시작하기 전에 안전한 연결이 설정된 것을 확인합니다.

이와 같은 과정은 페이지 로딩 시간을 늘리지만, 안전한 연결은 지연 비용을 감내할 가치가 있습니다. 왜냐하면 브라우저와 웹 서버 간에 전송되는 데이터는 제3자에 의해 해독될 수 없기 때문입니다.

서버로부터 총 여덟 번의 통신을 주고받고 나서야 브라우저는 마침내 요청을 보낼 수 있습니다.

Response

웹 서버와 연결이 확립되면 브라우저는 사용자를 대신하여 초기 HTTP GET 요청을 보냅니다. 대개 웹사이트의 경우 HTML 파일을 요청합니다. 서버는 요청을 받으면 관련된 응답 헤더와 HTML 내용을 담아 응답합니다.

Parsing

구문 분석(Parsing)은 브라우저가 수신한 정보를 이해하고 처리하는 과정입니다. 이 과정에서 브라우저는 네트워크로부터 받은 데이터를 DOM(Document Object Model)과 CSSOMCSSOM(CSS Object Model)으로 변환하여 렌더링에 필요한 요소로 변환합니다. DOM은 HTML 문서의 구조를 트리 형태로 표현하는 객체 모델로, 이를 통해 JavaScript와 같은 스크립트 언어로 HTML을 조작할 수 있습니다.

브라우저는 받은 HTML 문서를 파싱하여 DOM 트리와 CSSOM 트리로 변환합니다. 이렇게 구성된 DOM 트리는 문서의 구조와 내용을 나타내며, 이를 통해 페이지의 구조가 형성됩니다. 또한, CSS 파일을 파싱하여 스타일 규칙을 분석하고 각 요소의 스타일 정보를 계산하여 화면에 어떻게 보일지 결정합니다.

Render

렌더링 과정에서 브라우저는 DOM과 CSSOM을 합쳐 렌더 트리를 구성합니다. 이 계산된 트리는 DOM 트리의 루트 노드부터 눈에 보이는 노드를 탐색하여 생성됩니다. 이후, 브라우저는 각 요소의 위치와 크기를 계산하고 화면에 배치합니다. 마지막으로, 화면에 내용을 그리는 과정에서 GPU를 활용하여 최적화된 그래픽 처리가 이루어집니다.