브라우저가 랜더링 되는 과정은 사용자가 웹페이지에 요청을 하고, 웹 서버는 요청을 받아 HTML, CSS, Javascript등의 파일을 브라우저에 전달합니다.
브라우저 HTML 파일을 파싱하여 DOM 트리를 생성하고, 필요한 경우 외부 CSS와 JavaScript 파일도 함께 가져옵니다. CSS 파일을 파싱하여 CSSOM 트리를 생성하고, DOM트리와 CSSOM트리를 결합하여 렌더 트리를 생성합니다. 브라우저는 렌더 트리의 각 요소의 위치와 크기 정보를 계산하고 마지막으로 브라우저는 화면에 요소들을 그려 표시합니다.
1. HTML, CSS, JavaScript 파일 전달: 웹 서버는 웹페이지의 정보를 담은 HTML, CSS, JavaScript 파일을 브라우저에게 전달합니다.
- 웹 서버란 ?
웹 서버란 웹 페이지를 제공하기 위해 필요한 정보를 저장하고 있는 컴퓨터 시스템이자 관련 소프트웨어로, 웹 브라우저와 같은 클라이언트로부터 웹 페이지 정보를 요청받으면 해당 정보를 담은 파일을 전달하는 역할을 수행합니다. 대표적인 웹 서버 소프트웨어로는 Apache, Nginx, Microsoft IIS 등이 있습니다.
2. DOM 구성: 브라우저는 HTML을 파싱하여 DOM(Document Object Model) 트리를 만듭니다. DOM 트리는 웹페이지의 요소들을 구조화된 형태로 표현합니다.
- DOM이란?
DOM (Document Object Model)은 웹 페이지의 구조를 표현하는 객체 지향 모델입니다. 웹 페이지의 요소들, 예를 들어 태그, 속성, 텍스트 등을 객체로 취급하고, 이들 간의 관계와 계층 구조를 표현하여 웹 페이지를 조작하고 접근할 수 있도록 하는 프로그래밍 인터페이스
- DOM 트리란 ?
DOM 트리는 DOM 객체들의 계층 구조를 나타냅니다. 브라우저가 HTML 문서를 읽어들일 때, 각각의 요소와 요소들 사이의 관계를 나타내는 트리 구조를 생성
3. CSSOM 구성: 브라우저는 CSS를 파싱하여 CSSOM(CSS Object Model) 트리를 만듭니다. CSSOM 트리는 웹페이지 요소의 스타일 정보를 담고 있습니다.
- CSSOM 이란?
CSSOM은 CSS 스타일 정보를 표현하고 조작할 수 있는 인터페이스를 제공합니다. 이를 통해 웹 개발자들이 스크립트를 사용하여 스타일 시트를 동적으로 수정하거나, CSS 정보를 읽어 사용할 수 있습니다.
4. 렌더 트리 구성: DOM 트리와 CSSOM 트리가 합쳐져서 렌더 트리가 만들어집니다. 렌더 트리는 브라우저가 웹페이지를 그릴 때 필요한 정보를 포함합니다.
- 렌더트리란?
렌더 트리(render tree)는 웹 브라우저가 웹페이지를 화면에 그리기 위해 필요한 모든 정보를 포함하는 트리 구조 DOM(Document Object Model) 트리와 CSSOM(CSS Object Model) 트리를 결합한 결과물로, 최종적으로 웹페이지의 시각적 표현을 위해 사용됩니다.
5. 레이아웃: 렌더 트리를 기반으로 한 요소들의 크기와 위치를 계산하여 화면에 배치될 준비를 마칩니다.
6. 그리기(Paint): 브라우저는 화면에 실제 픽셀로 그리기 과정을 수행합니다.
'면접준비' 카테고리의 다른 글
| 프레임워크와 라이브러리 차이점 (0) | 2023.07.21 |
|---|---|
| parameter와 argument의 차이 (0) | 2023.07.20 |
| Hoisting, TDZ란? (0) | 2023.07.20 |
| Patch는 왜 RESTful API에서 잘 사용되지 않을까? (0) | 2023.07.19 |
| Restful API에 아는걸 적어보자. (0) | 2023.07.19 |