[CS] 웹 브라우저 동작 원리 (2)

[CS] 웹 브라우저 동작 원리(2)

이번 포스팅은 저번 웹 브라우저 동작 원리 (1)에 이어서 웹 페이지 로드 과정 중 Processing과 Load 과정을 살펴볼 예정입니다.

웹 페이지 로드 과정

아래 그림은 W3C Navigation Timing Level 2 Specification에 첨부되어있는 웹 브라우저 네비게이션 동작과정을 도식화 한 이미지입니다.

W3C Navigation Timing Level 2 Specification
https://www.w3.org/TR/navigation-timing-2/#processing-model

 

위의 "W3C Navigation Timing Level 2 Specification"의 도식에서 processing과 load 부분을 조금 더 자세히 살펴보면 아래와 같은 단계를 확인할 수 있습니다.

각 단계를 간단히 살펴보겠습니다.

Processing

• domLoading : 전체 프로세스의 시작 타임스탬프입니다. 브라우저가 처음 수신한 HTML 문서 바이트의 파싱을 시작하는 단계입니다.
• domInteractive : 브라우저가 파싱을 완료하고 모든 HTML 및 DOM 생성 작업이 완료되는 단계입니다.
• domContentLoaded : DOM과 CSSOM을 생성한 이후 화면에 나타내기 전, Javascript의 기능이 추가되는 단계입니다.
  이미지와 같은 외부 리소스는 현재 단계에서는 아직 로드되지 않았기 때문에, 리소스를 필요로 하지 않는 빠른 실행이 요구될 경우 아래 코드와 같이 해당 라이프사이클 이벤트를 활용할 수 있습니다.
  
  window.addEventListener('DOMContentLoaded', function( ){ ... }
  
  
• domComplete : 모든 처리가 완료되고 페이지 리소스의 다운로드가 완료되는 단계입니다.

Navigation Timing API
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp?hl=ko

load

페이지 로드의 최종 단계로, 모든 리소스들이 로드 되는 단계입니다.
이 단계에서 브라우저가 추가 애플리케이션 로직을 트리거할 수 있는 onload 이벤트를 발생시킵니다. 동일한 문서에 onload는 하나씩만 존재하며, 중복될 경우 마지막 선언이 실행됩니다.

당연한 이야기지만 앞에 Processing 단계에서 설명한 domContentLoaded 이벤트 보다 훨씬 나중에 실행되기 때문에 불필요한 로딩시간이 추가될 수 있습니다.

여기까지가 웹 페이지의 로드과정입니다. 저번 포스팅보다 짧다고 느껴지지만, 이전 웹 브라우저 동작 원리 (1) 과정에서는 대부분 백엔드와 관련된 네트워크 부분이었기 때문에 클라이언트와 관련된 단계를 따로 포스팅하게 되었습니다.

이후의 추가적인 동작 원리와 관련 내용은 다음 포스팅에서 이어서 작성하도록 하겠습니다!