브라우저의 작동 방식은 다음과 같은 단계로 이루어집니다:
1 URL 입력 및 요청: 사용자가 URL을 입력하면 브라우저는 해당 주소의 웹 서버에 HTTP 요청을 보냅니다.
2 서버 응답 및 데이터 수신: 서버는 요청을 처리하고 HTML, CSS, JavaScript 파일 등을 브라우저에게 응답으로 보냅니다.
3 HTML 파싱 및 DOM 생성: 브라우저는 HTML을 파싱하여 Document Object Model (DOM) 트리를 만듭니다. 이 트리는 웹 페이지의 구조를 나타냅니다.
4 CSS 파싱 및 CSSOM 생성: CSS 파일도 파싱되어 CSS Object Model (CSSOM) 트리가 생성됩니다. 이것은 페이지의 스타일을 정의합니다.
5 렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 이 트리는 페이지의 시각적 표현을 나타내며, 각 요소의 크기와 위치를 포함합니다.
6 레이아웃 단계: 렌더 트리를 기반으로 브라우저는 각 요소의 크기와 위치를 계산합니다.
7 페인팅: 계산된 스타일과 레이아웃 정보를 사용하여 화면에 페이지를 그립니다. 여기에는 텍스트, 이미지, 다른 시각적 요소들이 포함됩니다.
8 JavaScript 실행: 필요한 경우 JavaScript가 실행되어 동적인 기능을 추가하거나 페이지를 변경합니다.
9 로드 완료: 모든 요소와 스크립트가 로드되고 실행되면 페이지 로딩이 완료됩니다. 사용자는 이제 페이지와 상호 작용할 수 있습니다.
이러한 과정은 빠르게 일어나며 사용자에게는 매끄럽게 보이게 됩니다. 동적인 웹 페이지의 경우 추가적인 비동기 요청과 작업이 있을 수 있어, 사용자와의 상호 작용에 따라 계속 업데이트될 수 있습니다.
포인트
브라우저의 순서를 단계별로 먼저 암기하고 코딩을하면서 이에 대해 곱씹으며 체감하면서 이중으로 외워보자
면접에서 할 대답
- 사용자가 URL을 입력하면 브라우저는 웹 서버에 HTTP 요청을 보내고 데이터를 수신합니다.
- 받은 HTML과 CSS는 파싱되어 DOM과 CSSOM 트리를 생성하며, 이들은 렌더 트리로 병합됩니다.
- 렌더 트리를 기반으로 레이아웃 단계에서 각 요소의 크기와 위치를 계산합니다.
- 계산된 정보로 화면에 페이지를 그리는 페인팅 단계가 이루어집니다.
- 필요한 JavaScript가 실행되고 모든 요소가 로드되면 페이지가 완성되어 사용자와 상호 작용합니다.
'ComputerScience' 카테고리의 다른 글
| 프로토콜 ) TCP와 UDP의 특징과 차이 (0) | 2023.08.25 |
|---|---|
| 쿠키(Cookie)와 세션(Session)의 차이, 쿠키란? 세션이란? (0) | 2023.08.24 |
| CORS(Cross-Origin Resource Sharing)란 무엇인가? (0) | 2023.08.23 |
| HTTP 메서드 (0) | 2023.08.21 |
| 외래키(Foreign Key) 와 기본키(Primary Key) 의 정의와 예시 (1) | 2023.08.21 |