Q. 브라우저의 작동방식

ⅰ. 요청 및 응답

- 사용자가 URL을 입력하면 브라우저는 해당 웹 서버에 HTTP 요청을 보냄
- 서버는 요청을 처리하고, HTML, CSS, JavaScript, 이미지 등의 리소스를 포함한 응답을 브라우저에 전송함

ⅱ. HTML 파싱

- 브라우저는 받은 HTML문서를 파싱하여 DOM(Document Object Model)트리를 구축함
- 이 DOM 트리는 웹 페이지의 구조화된 표현

ⅲ. CSS 파싱

- CSS는 파싱되어 CSSOM (CSS Object Model)트리를 생성함
- CSSOM은 웹 페이지의 스타일 정보를 포함하고 있음

ⅳ. 렌더 트리 생성

- DOM과 CSSOM 트리는 결합되어 렌더 트리를 형성함
- 이 트리는 페이지의 시각적 표현을 나타내며, 화면에 표시될 요소와 그 요소의 스타일을 포함하고 있음

ⅴ. 레이아웃(또는 리플로우)

- 렌더 트리를 바탕으로 브라우저는 각 요소의 크기와 위치를 계산함
- 이 과정에서 화면에 표시될 요소의 정확한 위치와 크기를 결정함

ⅵ. 페인트

- 렌더 트리를 기반으로 화면에 요소를 그리는 과정
- 픽셀 단위로 요소의 스타일을 적용하여 화면에 그림

ⅶ. 스크립트 실행

- JavaScript는 파싱되면서 실행되며, DOM을 조작하거나 이벤트 핸들러를 추가하는 등의 작업을 수행할 수 있음
- 중요한 것은 JavaScript의 샐행이 DOM의 구축과 병렬적으로 이루어질 수 없기 때문에, 스크립트의 로딩과 실행은 렌더링 프로세스를 차단할 수 있음
- 이를 최적화하기 위해 비동기 스크립트 로딩 방식, 지연 로딩(defer) 등의 기법이 사용됩니다.

ⅷ. 추가 리소스 로드

- 이미지, 폰트, 외부 스크립트와 같은 추가 리소스가 있다면, 이러한 리소스들도 요청되어 로드됨

첫번째로는 사용자가 URL을 입력할 때, 브라우저가 웹 서버에 해당 주소의 정보를 요청합니다. 서버는 이 요청에 반응하여 필요한 파일과 데이터를 브라우저에게 전달합니다.
두번째로는 브라우저가 받은 HTML 파일을 분석하여, 웹 페이지의 구조를 나타내는 DOM 트리를 생성합니다.
세번째는 CSS 파일의 분석입니다. 브라우저는 CSS를 파싱하여 웹 페이지의 스타일을 나타내는 CSSOM 트리를 형성합니다.
네번째 과정에서는 앞서 생성한 DOM과 CSSOM 트리를 합쳐서, 화면에 어떤 요소가 어떤 스타일로 표현될지를 결정하는 렌더 트리를 만들어냅니다.
다섯번째로는 화면에 각 요소가 어떻게 배치될지를 결정하는 레이아웃 과정을 거칩니다.
여섯번째 과정에서는 앞서 결정된 스타일과 배치에 따라 실제 화면에 요소를 그리는 페인팅 작업이 이루어집니다.
일곱번째는 웹 페이지의 동적인 기능을 담당하는 JavaScript의 실행입니다. 이 과정에서 웹 페이지는 사용자의 입력에 반응하거나, 다양한 상호작용을 제공합니다.
마지막으로 웹 페이지에 필요한 추가적인 이미지나 외부 스크립트와 같은 리소스들을 요청하고 로드하는 과정을 거칩니다.
브라우저는 여러 단계를 거쳐 웹 페이지를 사용자에게 제공합니다.