웹 페이지 로드 과정 / Process of Loading a Web Page

1. 네트워크 요청
URL 분석: 사용자가 주소창에 입력한 URL을 분석하여 프로토콜, 호스트 이름, 경로, 쿼리 스트링 등을 파악한다.
DNS 조회: 호스트 이름을 IP 주소로 변환하기 위해 DNS 서버에 조회를 보낸다.
TCP 연결: DNS 조회를 통해 얻은 IP 주소와 포트 번호를 사용하여 서버와 TCP 연결을 한다.
HTTP 요청: 서버에 HTTP 요청 메시지를 전송한다. HTTP 요청 메시지는 요청되는 리소스 URL, 헤더 정보, 요청 body(POST 메서드 사용 시) 등을 포함한다.

 

*해당 단계에서 브라우저는 먼저 캐시를 확인하여 요청한 리소스가 캐시에 있는지 확인한다. 캐시에 있는 경우, 브라우저는 캐시된 리소스를 사용하여 네트워크 요청을 최소화한다.

2. 서버 처리 및 응답
서버 처리: 서버는 요청된 리소스를 확인하고 처리한다.
HTTP 응답: 처리 결과는 HTTP 응답 메시지에 담겨 브라우저로 전송된다. HTTP 응답 메시지는 응답 코드, 헤더 정보, 응답 body(HTML, CSS, JavaScript 파일 등)을 포함한다.

3. 페이지 렌더링
HTML 파싱: HTML 코드를 분석하여 DOM(Document Object Model) 트리를 생성한다.

DOM 트리 : HTML 문서의 구조를 나타내는 트리 구조의 데이터

CSS 파싱: CSS 코드를 분석하여 CSSOM(CSS Object Model) 트리를 생성한다.

CSSOM 트리 : 스타일 규칙을 나타내는 트리 구조의 데이터

렌더 트리 생성: DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다.

렌더 트리: 각 노드의 레이아웃 정보와 스타일 정보를 포함함

레이아웃 계산: 렌더 트리의 각 노드에 대한 정확한 위치와 크기를 계산한다.
페인팅: 각 노드를 화면에 그려 페이지를 렌더링하는 것

4. 추가 리소스 로딩
페이지에 이미지, CSS 파일, JavaScript 파일 등의 외부 리소스가 포함된 경우, 브라우저는 각 리소스에 대해 추가적인 HTTP 요청을 전송한다. 외부 리소스가 로딩되면 페이지 렌더링 과정에 반영되어 페이지가 완성된다.

 

* 페이지를 로딩 단계에서 캐시된 리소스가 있다면, 브라우저는 서버에 요청을 보내지 않고 캐시된 리소스를 사용할 수 있다. 이를 통해 페이지 로딩 속도를 빠르게 하고, 서버의 부하를 줄일 수 있다.

5. JavaScript 실행 (선택 사항)
페이지에 JavaScript 코드가 포함된 경우, 브라우저의 JavaScript 엔진이 코드를 실행한다.
JavaScript 코드는 DOM 요소를 조작하거나 페이지 동작을 제어하는 역할을 한다.

6. 사용자 상호작용
페이지가 렌더링되고 JavaScript 코드가 실행되면 사용자는 페이지와 상호작용할 수 있다.
smooth scrolling과 touch 반응성 등 사용자 상호작용은 주로 브라우저의 main thread에 의해 제어된다.
JavaScript 코드가 main thread를 점유하면 사용자 상호작용이 지연될 수 있다.

성능 최적화
웹 페이지 로딩 속도와 사용자 상호작용을 개선하기 위해서는 다양한 성능 최적화 기법을 활용할 수 있다.
네트워크 요청 최소화, 캐싱 활용, 코드 최적화, main thread 점유 시간 감소 등이 주요 성능 최적화 기법이다.

추가 정보
브라우저는 대부분 single-threaded이며, main thread가 점유되면 사용자 상호작용이 지연될 수 있다.
JavaScript를 defer 또는 async 속성을 사용하여 main thread 점유 시간을 줄일 수 있다.
레이아웃 변경을 최소화하고 레이어를 활용하여 페인팅 성능을 개선할 수 있다.

 

 

references :

https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work

Populating the page: how browsers work - Web performance | MDN

https://blog.imqa.io/webpage_loading_process/

웹 페이지 로딩 과정 이해하기