2020. 10. 27. 23:43ㆍFrontend
위 포스팅은 W3C의 스펙과 구글 개발자 문서를 참고하여 작성되었습니다.
Overview
효율적인 웹 페이지를 작성하기 위해서는 이 웹 페이지를 다운로드하고, 파싱 하고, 렌더링 해서 사용자에게 보여주는 일련의 과정들을 이해하는 것이 중요합니다. 따라서 이번 포스팅에서는 브라우저가 웹 페이지를 HTTP를 사용해서 다운로드하여 사용자에게 보여주기까지 어떤 과정들을 거치게 되는지를 살펴보려고 합니다.
Process
브라우저가 HTML파일을 파싱 해서 DOM트리를 그리고 렌더링을 하는 일련의 과정을 살펴보기 전에, 먼저 조금 더 포괄적인 관점에서 이를 살펴보려고 합니다. 먼저 아래와 같은 간단한 상황을 가정해보겠습니다.
현재 있는 페이지(www.a.com) 에서 주소창에 주소를 입력하여 다른 페이지(www.b.com)로 이동하려고 한다.
이때 브라우저가 하는 일. 즉, 사용자 액션을 감지하여 웹 페이지를 로드하는 과정은 다음의 스펙(W3C Spec)을 따릅니다.
1. Prompt for unload
현재 페이지에서 다른 페이지로 이동하려고 할 때, 발생하는 이벤트입니다. 웹 서핑을 하다 보면, 뒤로 가기 버튼이나, 링크를 눌러 다른 도메인의 페이지로 이동하려 할 때, "현재 보고 있는 페이지에서 나가시겠습니까? 같은 알림 창이 뜹니다." 이러한 메시지를 처리하는 단계입니다. 브라우저의 전역 객체인 window에 unload이벤트를 등록해두면 이를 사용할 수 있습니다.
2. Redirect ~ Response
위의 사진에서 파란색이 아닌 노란색으로 칠해진 단계들은 자바스크립트로 컨트롤할 수 있는 과정들이 아닙니다. 이는 Network Level에서 이루어지는 것으로, 요청을 받아 HTML파일등의 리소스를 브라우저로 가져오는 일련의 과정을 의미합니다.
우선 Redirect는 서버에서 명시적으로 res.redirect 등을 통해 리다이렉트 시켜주는 것을 의미합니다. 서버의 redirect 시그널을 받은 브라우저는 해당 URL로 HTTP 요청을 보냅니다.
AppCache는 HTTP요청을 보낼 때, 해당 요청에 대한 유효한 응답이 이미 AppCache(Application Cache)에 캐싱되어 있는지를 확인합니다. 이미 캐싱되어 있는 데이터가 있다면, 이를 네트워크 통신을 하지 않고 바로 사용하여 퍼포먼스의 효율을 높입니다.
DNS는 HTTP요청을 통해 보낸 도메인 (www.a.com)을 실제 HTML 파일 등의 리소스들을 가지고 있는 서버의 IP주소 (12.3.4.55)로 변환해 주는 역할을 합니다. 이를 통해 사용자 친화적인 도메인에서 컴퓨터 친화적인 서버 IP주소로 매핑이 이루어지게 됩니다.
TCP레이어에서 요청이 성공적으로 이루어지면, Response 가 오게 됩니다.이를 다음 단계에서 가공합니다.
3. Processing
Processing단계에서 드디어 렌더링이 실행됩니다. 자세한 과정은 다음 포스팅에서 차차 살펴보겠지만, 다운로드한 HTML 파일과, CSS파일들을 브라우저가 해석하기 쉽도록 트리 형태의 객체 구조로 바꾸어줍니다. 이를 DOM(Document Object Model)이라고 합니다. 브라우저는 이렇게 HTML, CSS파일들을 파싱 하여 렌더 할 수 있는 형태의 DOM Tree로 만들고, 각각의 요소들이 화면에 그려질 위치를 계산한 뒤에 최종적으로 이를 화면에 그려내게 됩니다.
4. Load
이렇게 렌더과정까지 마무리되면, 브라우저는 다운로드한 파일들을 사용자가 알아볼 수 있는 형태로 화면에 보여주게 됩니다. 물론 이 모든 과정들은 점진적으로 일어나기 때문에 DOM트리를 생성하면서 또 파일을 다운로드하는 등의 병렬적인 단계들이 수행되기는 하지만, 기본적으로 브라우저는 다음과 같은 순서대로 웹 페이지를 화면에 로드합니다.
References
developer.mozilla.org/en-US/docs/Web/API/Window/unload_event
Window: unload event
The unload event is fired when the document or a child resource is being unloaded.
developer.mozilla.org
'Frontend' 카테고리의 다른 글
| [Safari] 내 iPhone 브라우저 Inspect하기 (0) | 2021.01.04 |
|---|---|
| [React] 클로저와 useState Hooks (2) (3) | 2020.11.03 |
| [CSS] CSS Sprite란? (0) | 2020.10.07 |
| [Javascript] 이벤트 루프(Event Loop) (0) | 2020.10.06 |
| [Javascript] let, var, const (0) | 2020.10.04 |