브라우저 작동 방식

 

이번에는 브라우저가 어떻게 작동하는지에 대해서 알아보고자 한다. 

 

---

 

브라우저에서 중요한 것

웹 성능에 있어서 가장 주요한 문제는 지연시간과 대부분 브라우저가 싱글 쓰레드로 동작한다는점이다. 

 

- 지연시간 : 빠른 로딩에 있어서 지연시간은 이겨내야 할 중요한 문제이다. 빠른 로딩을 위해 최대한 빠르게 요청하는 것과 웹 최적화를 통해 페이지 로드가 최대한 빠르게 이루어지도록 한다. 

 

- 싱글 쓰레드 : 대부분의 브라우저는 싱글 쓰레드이다. 원활한 상호작용을 하기 위해서는 메인 쓰레드가 요청된 모든 작업을 수행하면서도 유저의 상호작용에 반응할 수 있도록 하는 렌더링 시간이 가장 중요하다. 따라서 이를 위해 메인 쓰레드의 책임을 줄여주는 방식으로 웹 성능 향상을 이루고자 한다. 

 

 

브라우저 동작 흐름

브라우저는 다음과 같은 흐름으로 동작한다 .

 

요청

사용자가 주소창에 URL을 입력하거나 링크를 클릭하는 등의 요청을 보낸다. 

 

DNS 조회

만약 https://example.com 에 접속하고자 한다면 브라우저는 DNS 조회 요청을 시도한다. DNS에 대한 자세한 작동방식은 아래에 작성하였으니 참고하면 된다. 

 

주소 : https://jheaon.tistory.com/228

도메인과 DNS 그리고 DNS의 작동원리

 

 

TCP Handshake

IP 주소를 알고난 후에는, 브라우저는 서버와 TCP 3방향 핸드셰이크를 통해 연결을 설정한다. (해당 방식은 데이터를 전송하기 전에 통신하려는 두 주체가 TCP 소켓 연결을 위한 매개변수를 주고 받을 수 있도록 만들어졌다.)

 

 

TCP의 3방향 핸드셰이크는 SYN-SYN-ACK로 불리기도 하며, 두 컴퓨터 간 TCP 세션을 협상하고 시작하기 위해서 TCP가 3개의 메세지를 전달하는 식으로 이루어진다.

 

TLS 협상 (TLS Negotiation)

 

 

HTTPS을 이용한 보안성이 있는 연결을 하기 위해서는 또다른 핸드셰이크가 필요하다. 해당 핸드셰이크는 통신 암호와에 쓰일 암호를 결정하고, 서버를 확인한 뒤, 실제 데이터 전송 전에 안전한 연결이 이루어지도록 한다. 이를 위해서 자원에 대한 실제 요청 전에 클라이언트에서 서버로 3번 더 왕복하여야 한다. 

 

연결에 보안성을 더하게 되면 페이지 로딩을 더뎌지게 하낟. 하지만 "보안"이라는 장점을 가지고 있기에 지연시간이라는 비용을 낼 만큼 충분한 가치를 가지고 있다. 이렇게 8번의 왕복이 있는 후에 브라우저는 요청을 할 수 있게 된다. 

 

 

 

응답

웹 서버로 한 번 연결이 성립하게 되면, 브라우저는 유저 대신에 초기 HTTP request를 보낸다. 대게 HTML 파일을 요청하며, 서버가 요청을 받으면 관련 해더와 함께 HTML 내용을 응답하게 된다. 

 

 

 

화면에 렌더링하기

 

 

브라우저가 첫 번째 데이터를 받으면 수신된 정보를 구문 분석(Parsing : 파씽)하기 진행한다. 구문 분석이란 브라우저가 네트워크를 통해

받은 데이터를 DOM(Document Object Model)이나 CSSOM(CSS Object Model)으로 바꾸는 단계를 의미한다. 이는 랜더러가 화면에 페이즈를 그리는데 사용된다. 

 

해당 과정들에 대해서 상세히 알아보자. 

 

- HTML 파싱과 DOM 생성 과정 

 

1. 서버는 브라우저에서 받은 요청을 HTML 파일을 읽어드린 후 메모리에 저장한다. 그리고 그 메모리에 저장된 바이트를 응답한다. 

2. 브라우저는 응답받은 바이트 형태의 문서를 meta 태그의 charset 어트리뷰트에 지정된 인코딩에 따라 문자열로 반환한다. 

3. 문자열로 변환환된 HTML문서를 문법적 의미를 갖는 코드의 최소 단위인 토큰으로 분해한다. 

4. 토큰들의 내용에 따라 객체로 변환하여 각 노드를 생성한다. (문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드)

5. HTML은 요소 간의 부자 관계인 중첩 관계를 갖는데, 이를 반영하여 모든 노드들을 트리 구조로 구성하여 DOM을 만든다. 

 

 

- CSS파싱과 CSSOM 생성과정

 

렌더링 엔진은 HTML문서를 한줄 한줄 순차적으로 파싱하여 DOM을 생성한다 그러다가 CSS을 로드하는 link태그 혹은 style태그를 만나면 DOM생성을 중지한 후 CSS파싱의 결과물인 CSSOM을 생성하는 과정을 진행한다. 

 

CSS 파싱 과정은 바이트 > 문자 > 토큰 > 노드 > CSSOM 생성 순으로 HTML의 파싱 과정과 동일하다. 

 

 

- 자바스크립트 파싱 과정

 

렌더링 엔진은 HTML 문서를 한 줄씩 순차적으로 파싱하다가 자바스크립트 파일을 로드하는 script 태그를 만나면 DOM생성을 일시 중지한다. 그리고 script 태그의 src에 정의된 자바스크립트 파일을 서버에 요청하여 응답받으면 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘긴다. 자바스크립트 파싱이 끝나면 렌더링 엔진으로 다시 제어권을 넘기고 DOM 생성을 이어간다. 

 

만약 생성되지 않은 DOM을 조작한다면 에러가 발생할 수 있기에 body 요소 아래에 자바스크립트를 위치시키거나 DOM 생성이 완료된 시점에 자바스크립트가 실행되도록 한다. 

 

 

 

- 렌더 트리 구축 

 

CSSOM 트리와 DOM 트리를 결합하여 표시해야 할 순서로 내용을 그려낼 수 있도록 하기 위해 렌더 트리를 형성한다. 해당 과정을 Attachment라고 한다. 렌더 트리는 홤녀에 표시되는 각 노드의 위치를 계산하는 레이아웃에 사용되고 픽셀을 화면에 그리는 페인트 과정에도 사용된다. 

 

 

- 렌더 트리 배치 

 

렌더 트리가 생성되고, 기기의 뷰포트 내에서 렌더 트리의 노드가 정확한 위치를 계산한다. 이때 CSS에 상대적인 값인 %, rem, vh으로 할당 된 값들은 절대적인 값인 px로 변환된다. 이 과정을 Layout 또는 Reflow라고 한다. 

 

 

- 렌더 트리 그리기 

 

 

렌더 트리의 각 노드를 Painting 메서드를 통해 실제 픽셀로 나타낸다. 해당 과정 이후 브라우저 화면에 UI가 나타내게 된다. 

 

 

---

참조 : 

 

https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work

웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 - 웹 성능 | MDN

https://velog.io/@thyoondev/%EC%9B%B9-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

웹 브라우저의 동작원리를 알아보자