브라우저 동작 원리

1. 요청 (Request)

사용자가 URL을 입력하거나 링크를 클릭하면 브라우저는 해당 웹 페이지를 요청합니다. 이 과정에서 브라우저는 DNS(Domain Name System) 서버에 요청을 보내 도메인을 IP 주소로 변환합니다. 이렇게 해서 얻은 IP 주소를 통해 서버에 HTTP 요청을 전송하게 됩니다.

2. 응답 (Response)

서버는 요청을 처리한 후 HTTP 응답을 반환합니다. 이 응답에는 HTML, CSS, JavaScript, 이미지 등 다양한 자원이 포함될 수 있습니다. 이제 브라우저는 이 응답을 바탕으로 웹 페이지를 구성해 나갑니다.

3. 렌더링 (Rendering) ⭐

렌더링은 다음과 같은 여러 단계로 나뉩니다:

• HTML 파싱
  
  • 브라우저는 서버로부터 받은 HTML 파일을 파싱하여 DOM트리를 생성합니다. DOM은 웹 페이지의 구조를 표현하는 객체로, HTML 요소가 트리 구조로 구성됩니다.

• CSS 파싱
  
  • 브라우저는 HTML과 함께 받은 CSS 파일을 파싱하여 CSSOM 트리를 생성합니다. CSSOM은 스타일 규칙을 객체로 표현하며, 각 요소에 적용할 스타일을 정의합니다.

• 렌더 트리 생성
  
  • DOM과 CSSOM을 결합하여 렌더 트리(Render Tree)를 생성합니다. 렌더 트리는 화면에 표시될 요소와 그 스타일을 포함하고 있습니다. 이 단계에서는 실제로 화면에 보여질 요소만 포함됩니다.

• 레이아웃 (Layout)
  
  • 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산하는 과정을 "레이아웃"이라고 합니다. 이 단계에서 브라우저는 요소의 위치를 결정하고, 최종적으로 화면에 표시될 내용을 준비합니다.

• 페인팅 (Painting)
  
  • 레이아웃이 완료되면, 브라우저는 각 요소를 실제 픽셀로 변환하여 화면에 그립니다. 이 과정을 "페인팅"이라고 하며, 최종적으로 사용자가 볼 수 있는 웹 페이지가 생성됩니다.

4. JavaScript 실행

브라우저는 HTML 파싱 중 <script> 태그를 만나면 JavaScript를 실행합니다. JavaScript는 DOM과 CSSOM을 조작할 수 있으며, 이를 통해 동적인 콘텐츠를 생성할 수 있습니다.

5. 이벤트 처리

사용자의 입력(클릭, 키 입력 등)에 반응하여 이벤트가 발생하면, 브라우저는 해당 이벤트를 처리합니다. 이 과정에서 이벤트 버블링과 캡처링이 이루어져, 이벤트가 상위 또는 하위 요소로 전파됩니다.

6. 네트워크 요청

페이지에서 추가적인 리소스(이미지, API 호출 등)가 필요한 경우, 브라우저는 추가 요청을 서버에 보냅니다. 이러한 요청과 응답 과정은 렌더링과 병행되어 진행될 수 있습니다.

7. 최적화

브라우저는 성능을 높이기 위해 다양한 최적화 기법을 사용합니다. 예를 들어, CSS와 JavaScript 파일을 병합하거나 캐싱을 통해 불필요한 요청을 줄이는 등의 방법이 있습니다.