브라우저의 동작과정

URL 입력 및 HTTP 요청
사용자가 브라우저 주소창에 URL을 입력하면, 브라우저는 해당 URL을 해석하여 HTTP 요청을 생성합니다. 이 때, 요청 방식(GET, POST 등)과 함께 요청 헤더 정보를 함께 전송합니다.

서버 응답
브라우저가 HTTP 요청을 전송하면, 해당 서버는 요청을 받아 처리한 후 응답 데이터를 생성합니다. 이 때, 응답 헤더 정보와 함께 응답 바디(HTML, CSS, JavaScript 등)를 전송합니다.

HTML 파싱 및 DOM 생성
브라우저는 서버로부터 받은 HTML 데이터를 파싱하여 DOM(Document Object Model)을 생성합니다. 이를 통해 브라우저는 웹 페이지의 구조와 내용을 파악할 수 있습니다.

렌더링 트리 생성
DOM 생성 후, 브라우저는 CSS 파일을 파싱하여 스타일 규칙을 생성하고, DOM 요소에 적용하여 렌더링 트리를 생성합니다. 이 때, 브라우저는 화면에 보여질 수 있는 요소들만 선택하여 처리하고, display: none과 같이 보이지 않는 요소는 렌더링 트리에 포함시키지 않습니다.

레이아웃 및 페인팅
렌더링 트리 생성 후, 브라우저는 요소들의 위치와 크기 등을 계산하여 레이아웃을 생성합니다. 이후, 브라우저는 레이아웃을 기반으로 요소들을 화면에 그리기 위한 과정인 페인팅을 수행합니다.

자바스크립트 처리
HTML, CSS, JavaScript 등의 요소들이 모두 렌더링 된 후, 브라우저는 페이지 내의 자바스크립트 코드를 처리합니다. 이를 통해, 페이지의 동적인 기능이 구현됩니다.

페이지 로딩 완료
모든 요소들이 렌더링 되고 자바스크립트 코드가 실행되면, 페이지의 로딩이 완료됩니다. 이 때, 브라우저는 페이지의 상태를 기록하고, 뒤로 가기, 앞으로 가기, 새로고침 등의 사용자 요청을 처리할 수 있습니다.