[코드잇 풀스택 1기] - 브라우저 동작원리

브라우저 ??

우리가 웹을 사용하면서 가장 많이사용하고, 널리 사용되는 소프트웨어 중 하나입니다.

예를 들면 크롬, 파이어폭스, 엣지 등등 이런게 브라우저라고 생각하시면 됩니다.

 

우리가 google이라는 사이트를 들어가거나, 이미지를 볼때 브라우저 화면에서는

눈 깜빡 하는 사이에 보입니다. 하지만, 그 뒤에는 어떤 일 들이 일어 나고 있을까요!?

생각 해보셨나요 ??

 

참고 자료

https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work#%ED%83%90%EC%83%89navigation

 

 

브라우저의 각 순서에따라 설명 드리겠습니다.

 

1. 탐색

탐색은 웹페이지를 로딩하는 첫 단계입니다.

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

 

* DNS 조회 :

처음으로 접근하는 웹 페이지를 접근하기위해 DNS를 조회합니다.

브라우저는 DNS 조회를 요청하고, 최종적으로 서버에 의해서 처리되고 IP 주소로 응답합니다.

이후 IP는 일정 기간 동안 캐시가되고, 재요청 하는 대신 캐시를 보고 후속 요청 속도를 향상 시킵니다.

 

 

*TCP 핸드셰이크 : 

IP 주소를 알고난 후에는 브라우저는 서버와 TCP 3방향 핸드셰이크를 통해 연결을 설정합니다.

TCP의 3방향 핸드셰이크 기술은 두 컴퓨터간 TCP세션을 협상하고, 시작하기 위해 TCP가 3개의 메세지를 전달하기 때문입니다. 이는 요청이 보내지면 전에 3개의 추가적인 메세지가 컴퓨터 사이에 주고받아진다는 의미 입니다.

만약 내용을 받지 못했다면 재요청 하는걸로 알고있습니다.

 

*TLS 협상 : 

HTTPS를 이용한 보안성이있는 연결을 위해서는 또 다른 핸드셰이크가 필요합니다. TLS 협상은 핸드셰이크 통신 암호화에 쓰일 암호를 결정하고, 서버를 확인하고, 실제 데이터 전송 전에 안전한 연결이 이루어지는디까지 파악합니다.

 

그렇기 때문에 연결지연시간이 추가적으로 발생합니다. 하지만 보안성을 위해 충분히 가치가 있다고 합니다.

 

2. 응답

웹서버로 한 번 연결이 성립되고, 브라우저는 유저 대신에 초기 HTTP GET request를 보냅니다. 웹사이트는 HTML 파일을 요청합니다.

서버가 요청을 받으면, 관련 해더와 함께 HTML의 내용을 응답하게 됩니다.

 

* 혼잡 제어  / * TCP 슬로우 스타트

TCP 패킷은 전송 중에 세그먼트로 분할됩니다. TCP는 패킷의 순서를 보장하기 때문에 서버는 일정 개수의 세그먼트를 전송한 후 클라이언트로부터 ACK 패킷 형태로 승인을 받아야합니다.

 

승인을 받기 위해는 클라이언트는 ACK를 기다려야하고, 이 방식이 많이 발생한다면 네트워크 상황에서도 좋지 않습니다.

그래서 TCp 슬로우 스타트 알고리즘, 혼잡 제어를 통해서 관리를 할 수 있습니다.

추가적인 공부는 알고리즘을 검색하셔서 찾아보시면 좋을거같아요!

 

3. 구문 분석

 

브라우저가 첫 번째 데이터의 청크를 받으면, 수신된 저옵를 구문 분석하기 시작

구문분석 : 브라우저가 네트워크를 통해 받은 데이터를 DOM, CSS으로 바꾸는 단계 입니다.

 

* DOM 트리 구축

첫 단계는 HTML을 처리하여 DOM 트리를 만드는 것입니다. HTML 구문 분석은 토큰화와 트리 생성을 포함합니다.

여기서 HTML토큰은 시작 및 종료 태그, 속성 이름 및 값을 포함하고있습니다.

( HTML, HEAD, BODY, TITLE, LINK, P, H1) 이런 내용들이 있겠죠?

 

두 번째 단계는 CSS를 처리하고 CSSOM트리를 만드는 것입니다. CSS 객체 모델은 DOM과 비슷합니다. DOM과 CSSOM은 둘 다 트리구조입니다. 둘은 각각의 독립적인 자료구조입니다. 브라우저는 CSS규칙을 이해할 수 있고 작업을 진행할 수 있도록 스타일 맵을 변환합니다.

여기서 CSS에 있는 각각 규칙을 읽고, 트리 노드를 만듭니다. CSS 선택기에 기반해서 부모, 자식, 형제 노드를 만들어집니다.

 

4. 랜더

렌더링 과정에는 스타일, 레이아웃, 페인트 그리고 떄때로 합성이 포함됩니다.

 

* 스타일

세 번째 단계는 DOM, CSSOM을 합쳐 렌더 트리를 만드는 것입니다. 계산된 스타일 트리는 DOM트리의 루트부터 시작하여 눈에 보이는 노드를 순회하면서 만들어집니다.

* 레이아웃

네 번째 단계는 랜더 트리를 기반으로 각 노드의 도형 값을 계산하기 위해 레이아웃을 실행하는 것 입니다.

레이아웃은 랜더 트리에 있는 모든 노드의 너비, 높이, 위치를 결정합니다.

추가적으로 각 객체의 크기도 계산합니다.

* 페인트

마지막 단계는 각 노드를 화면에 페인팅하는 것입니다. 레이아웃 단계에서 계산된 각 박스를 실제 화면의 픽셀로 변환합니다.

페인팅에서 텍스트, 색깔, 경계, 그림자 및 버튼이나 이미지 같은 대체 요소를 포함하여 모든 요소의 시각적인 부분을 화면에 그리는 작업을 의미합니다.

 

5. 상호작용

메인 쓰레드가 페이지를 그리는 것을 완료하면, 모든 것이 준비 되었다고 생각할 수 있다, 하지만 onload 이벤트가 발생할 때 코드가 실행된다면, 메인 쓰레드는 여전히 대기 상태에 빠집니다.

 

 

 

모든 사진의 출처 : https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work