1. 웹 브라우저 동작 과정

주소창에 https://www.naver.com 등 URL을 검색하여, 해당 웹 페이지에 접속한 경험이 있을 겁니다. 그렇다면 어떤 동작 원리로 우리가 입력한 웹 페이지로 접속이 가능할까요?

💡 브라우저

• 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여,
• 내용을 화면에 보여주는 응용 소프트웨어

1.1 DOM

• JS는 HTML 조작에 특화된 언어
• JS에선 <p></p> 이런 HTML을 직접 해석하고 조작할 수 없습니다.
• 그런데 어떻게 HTML 태그들을 알아보고 조작할 수 있는 것일까요?
• JS가 HTML 조작을 하기 위해서는,
  • HTML을 자바스크립트가 해석할 수 있는 문법으로 변환해놓으면 됩니다.
• 그래서 HTML을 JS가 알아먹는 array 혹은 object 자료형에 담아버립니다.
• 그래서 실제로 브라우저는 HTML 페이지를 열어줄 때,
  • HTML을 JS로 쉽게 찾고 바꾸기 위해 object와 비슷한 자료형에 담아줍니다.

예를 들어,

1
<div style="color : red">안녕하세요</div>

브라우저는 위와 같은 HTML을 발견하면, object 자료로 바꿔서 보관해둡니다. 구체적으로는 var document = { } 이런 변수를 하나 만들어서 거기 넣어줍니다.

1
var document = {
2
  div1 : {
3
    style : {color : 'red'}
4
    innerHTML : '안녕하세요'
5
  }
6
}

이제 document.div1.innerHTML = '안녕' 이렇게 자바스크립트를 짜면 HTML 조작이 가능합니다. 그래서 저렇게 object에 담아두는 것입니다. (물론 실제 DOM과 생김새는 좀 다름)

위 변수를 document object라고 부릅니다. 여기다 model이라고 붙여서 DOM (Document Object Model)이라고 합니다.

cf. MDN DOM

1.2 CSSOM

CSSOM은 CSS Object Model의 약자입니다. 브라우저에서 HTML 파일을 분석하면 HTML 요소들을 DOM으로 변환해서 이해하는데, 그러면 정의한 스타일 CSS는 어떻게 이해할까요? 브라우저에서 DOM을 만들게 되면, 정의된 CSS를 병합해서 CSSOM을 만듭니다.

CSSOM에서는 개발자가 정의한 스타일뿐만 아니라 브라우저에서 기본적으로 설정된 모든 속성값들, 즉, cascading 룰에 따라서 합해진 모든 CSS 값들이 정의되어져 있습니다. 이를 Computed Styles라고 부르는데, 모든 것들이 이미 계산된 스타일을 말합니다.

cf. MDN CSSOM

예를 들어, CSSOM은 위 그림과 같이 표기될 수 있는데, 만약 HTML 요소에 font-size: 14px;로 지정하면, 이하 모든 요소들에 각각 14가 적용됩니다.

• 즉, 각각의 태그에서 폰트 사이즈를 지정하지 않았지만,
• 최상단 부모인 HTML에서 폰트 사이즈를 지정하면,
  • cascading(폭포) 룰에 의해 따라 body 모든 자식 요소들이 14로 기본 설정됩니다.
• 그래서 CSSOM에는 모든 스타일 관련 속성들이 포함되어 있습니다.

1.3 Render Tree

그래서 브라우저가 HTML 파일을 읽게 되면, 다음과 같은 절차를 거치게 됩니다.

1. DOM으로 변환
2. CCSOM을 만들어 최종 스타일을 전부 계산한 다음
   • CSSOM에는 Cascading(폭포) 규칙이 존재하기 때문에 CSS를 따로 정의하지 않아도
   • 브라우저에 기본 설정된 CSS 파일 등이 전부 적용
   • 밑에 있는 자식 요소들에도 부모 요소들의 속성값들을 물려받음
3. Render Tree를 만들어 사용자게 보여준다.

💡 Render Tree에 포함되는 속성과 포함안되는 속성

• span의 opacity: 0, visibility: hidden 으로 설정되었다면,
  • 사용자 눈에는 보이지 않지만 요소는 그대로 그 자리에 있습니다.
  • 다만 투명해질 뿐인거죠. 이런 요소들은 Render Tree에 포함됩니다.
• display : none라고 되어있다면,
  • 아예 사용자 눈에 보이지 않는 속성값들은 Render Tree에 포함되지 않습니다.

2. 웹 브라우저의 구성요소

• 사용자 인터페이스
  • 사용자가 접근할 수 있는 영역
  • e.g. URI를 입력할 수 있는 주소 표시줄, 이전/다음, 북마크, 새로고침, 정지, 홈 버튼 등
    • 요청 페이지를 보여주는 창을 제외한 나머지 모든 부분
• 브라우저 엔진
  • 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
  • e.g. Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업 수행
• 렌더링 엔진
  • 웹 서버로부터 응답 받은 자원을 웹 브라우저 상에 표시
  • e.g. HTML 문서를 응답받으면 HTML과 CSS를 파싱하여 화면에 표시
  • 브라우저는 서버로부터 HTML 문서를 응답받으면,
  • 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(parsing)되어
  • DOM, CSSOM 트리로 변환되고 렌더 트리로 결합합니다.
  • 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 표시
• 자료 저장소 : Cookie, Local Storage, Indexed DB 등 브라우저 메모리를 활용하여 저장하는 영역
• 통신 : HTTP 요청과 같은, 서버와 통신이 가능하게 하는 네트워크 호출에 사용
• JS 해석기 : JS 코드를 해석하고 실행
• UI 백엔드 : select, input 등 기본적인 위젯을 그리는 인터페이스

2.1 렌더링 엔진

렌더링 엔진의 종류는 아래와 같습니다.

• Blink : 크롬, 오페라
  • cf. 구글이 Webkit을 대체하기 위해 자체적으로 개발한 엔진
• Webkit : 사파리
• Trident : 익스플로어
• EdgeHTML : 마이크로소프트 엣지

각 브라우저마다 렌더링 엔진이 다르기 때문에, 같은 페이지가 다르게 보일 수 있습니다. e.g. Elments 탭에서 아래와 같은 코드

1
-ms-border-radius: 2em; /* 익스플로어에 적용, 보통 생략 */
2
-moz-border-radius: 1em; /* 파이어폭스 브라우저에 적용 */
3
-webkit-border-radius: 4em; /* 구글, 사파리 브라우저에 적용 */
4
-o-border-radius: 3em; /* 오페라에 적용 */

2.1.1 렌더링 엔진 동작 과정

렌더링 엔진은 서버로부터 응답받은 HTML 문서를 얻는 것으로 시작합니다. 이 문서의 내용은 보통 8KB 단위로 전송됩니다. 다음은 렌더링 엔진의 기본적인 동작 과정입니다.

1. 렌더링 엔진은 HTML 문서를 파싱하여 DOM 트리를 구축합니다.
2. 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱합니다.
3. DOM 트리와 2의 결과물을 합쳐 렌더 트리를 구축합니다.
4. 렌더 트리 각 노드에 대해 화면 상에서 배치할 곳을 결정합니다.
5. UI 백엔드에서 렌더 트리의 각 노드를 그립니다.

💡 파싱(parsing)

• 구문 분석이라고 한다.
• 문장이 이루고 있는 구성 성분을 분해하고 분해된 성분의 위계 관계를 분석하여 구조를 결정하는 것
• 즉, 데이터를 분해 분석하여 원하는 형태로 조립하고 다시 빼내는 프로그램

동작 과정의 순서는 위에서 설명한 Render Tree 동작 과정과 같습니다.

1. DOM으로 변환
2. CCSOM을 만들어 최종 스타일을 전부 계산한 다음
   • CSSOM에는 Cascading(폭포) 규칙이 존재하기 때문에 CSS를 따로 정의하지 않아도
   • 브라우저에 기본 설정된 CSS 파일 등이 전부 적용
   • 밑에 있는 자식 요소들에도 부모 요소들의 속성값들을 물려받음
3. Render Tree를 만들어 사용자게 보여준다.

3. 네트워크 요청 과정

사실 브라우저 주소창은 HTTP의 GET 요청을 하는 곳입니다. 그러면, 클라이언트 PC의 브라우저가 서버 PC에게 데이터를 요청합니다. (cf. GET 요청 : 서버에 있는 자원(resorce, 이른바 데이터)를 조회하는 HTTP 메서드 중 하나)

3.1 패킷(packet)

• 패킷(packet)
  • 번역하면. 소포, 택배라는 뜻
  • 네트워크를 통해 전송되는 데이터의 작은 조각
• e.g. 도로에 우주선, 전차같이 큰 차량을 통째로 운전해서 가면, 도로가 다 막힐 것입니다.
  • 그래서, 우주선, 전차같이 큰 차량들은 분해해서 가지고 간 뒤에,
  • 목적지에 도착하면, 그 부품들을 다시 조립해서 이동합니다.
• 위 예와 마찬가지로, 네트워크 상에 큰 데이터를 한 번에 보내면,
  • 네트워크 대역폭을 너무 많이 차지해서 다른 패킷들이 전송되질 못합니다.
• 그래서 용량이 큰 사진 데이터를 패킷으로 나눠 보낼 때,
  • 모두 작은 패킷 단위로 쪼갠 뒤에,
  • 목적지에 도달하면 패킷에서 원래 사진대로 되돌립니다.
  • 그냥 보내기만 하면, 늦게 도착하는 패킷도 있을 수 있어서, 원래 사진대로 돌리기 힘드니까
  • 송신 측에서 수신 측으로 패킷을 보낼 때는 각 패킷에 순서대로 번호를 붙여서 보냅니다.
  • 그러면 번호에 맞춰 정렬하면, 늦게 도착한 패킷도 원래 위치로 돌아갈 수 있다.

3.2 DNS

• 요청을 할 떄는, IP 주소를 통해 해당 서버 PC가 위치한 주소를 찾아가지만,
• IP 주소가 숫자로 되어 있어서, 일일히 기억하기가 힘듭니다.
• 그래서 DNS(Domain Name System)을 도입했습니다.
• DNS를 도입함으로써, 사용자들은 200.200.200.2 같은 숫자로 해당 웹페이지를 접속하는 것이 아니라,
  • naver.com, google.com 같은 DNS에 등록된 Domain Name으로 검색할 수 있는 것입니다.
• e.g.
  • 클라이언트가 DNS 서버에다가 도메인에 맞는 IP를 달라고 요청을 하면
  • DNS 서버가 응답을 하고, 클라이언트는 서버에 도메인으로 접속할 수 있다.

3.3 TCP 3 way handshake

• SYN(synchronize) : 접속 요청
• ACK(acknowledge) : 요청 수락

1. 클라이언트에서 먼저 SYN 메시지를 서버에게 접속을 허락해달라고 요청한다.

2. 서버는 접속을 수락하고,

   • ACK 메시지를 클라이언트한테 보낼 때,
   • 서버도 접속을 허락해달라고 SYN 메시지와 함께 보낸다.

3. 클라이언트가 접속을 수락하고 서버에서 ACK 메시지를 보낸다.

   • 참고로 요즘 최적화가 잘 되서 마지막 ACK를 보낼 때 데이터도 전송한다.

4. 3단계를 거쳐 연결이 되고나면 데이터를 전송한다.

위에 TCP 연결이 되었다고 연결이 된 게 아니라 개념적으로 연결되어 있을 뿐이다. 인터넷 망에 있는 수 많은 서버들이 연결되어 있는 건지 잘 모른다.

3.4 웹 브라우저 요청 흐름

1. URL을 입력한다.
2. DNS 서버로 IP를 찾아내고 생략된 PORT는 scheme로 찾아낸다.
3. 웹 브라우저가 HTTP 요청 메시지가 생성된다.

4. SOCKET 라이브러리를 통해서 TCP/IP로 IP와 PORT 정보를 찾은 거를

   • 3 way handshake 방식으로 서버랑 연결을 한다.

5. HTTP 요청 메시지는 OS에 있는 TCP/IP 계층으로 전달한다.

6. TCP/IP 계층에서 HTTP 요청 메시지를 패킷으로 감싼다.

7. 웹 브라우저가 만든 요청 패킷을
   • 서버에서 도착하면 패킷을 열어서
   • HTTP 요청 메시지를 확인해서 서버가 해석한다.

8. 서버가 HTTP 응답 메시지를 만들어서 TCP/IP 패킷을 감싸서,
   • 클라이언트에게 도착하면 패킷을 열여서 HTTP 응답 메시지를 확인해서 클라이언트가 해석한다.

9. 웹 브라우저가 HTML 렌더링을 해서, 클라이언트가 HTML 결과를 볼 수 있다.

Reference

• https://d2.naver.com/helloworld/59361
• 인프런, 김영한, 모든 웹 개발자를 위한 HTTP