웹 브라우저는 인터넷 상에서 웹 페이지를 검색하고 표시해주는 소프트웨어다.
브라우저는 HTML, CSS, JavaScript 등의 웹 기술을 이용하여 웹 페이지를 렌더링하고, 사용자와 상호작용을 가능하게 한다.

💻 브라우저의 구성 요소

1. 사용자 인터페이스 ( User Interface )
   • 사용자 인터페이스는 브라우저에서 웹 페이지를 검색하고 표시하는데 필요한 모든 요소를 포함한다.
   • 대표적인 예로는 url 표시줄, 북마크, 즐겨찾기 등이 있다. 뒤로/앞으로 가기 버튼

2. 브라우저 엔진 ( Browser Engine )
   • 브라우저 엔진은 렌더링 엔진과 사용자 인터페이스 사이의 상호작용을 처리한다.

3. 렌더링 엔진 ( Rendering Engine )
   • 랜더링 엔진은 HTML, CSS 코드를 해석하고, 페이지를 렌더링하여 화면에 표시한다.
   • 대표적인 렌더링 엔진으로는 Gecko ( 파이어 폭스 ), Webkit ( 사파리 ), Blink ( 크롬, 엣지 ) 등이 있다.

4. 통신 ( Networking )
   • 통신은 HTTP 요청 등을 통해 인터넷에서 리소스를 가져오는데 사용된다.
   • 대표적인 통신 모듈로는 XMLHttpRequest, fetch 등이 있다.

5. UI 백엔드 ( UI Backend )
   • 콤보 박스와 창 같은 기본적인 장치를 그린다.
   • 플랫폼에서 명시하지 않은 일반적인 인터페이스로, OS 사용자 인터페이스 체계를 사용한다.

6. 자바스크립트 해석기 ( JavaScript Interpreter )
   • 자바스크립트 해석기는 자바스크립트 코드를 해석하고 실행하는데 사용된다.

7. 데이터 저장소 ( Data Storage )
   • 데이터 저장소는 브라우저 내부에 데이터를 저장하거나 웹 사이트와 상호작용할 때 사용된다.
   • 로컬 스토리지 타입과 쿠키 타입으로 나눌 수 있다.

---

💻 브라우저 렌더링 과정

렌더링 엔진이 HTML, CSS, JavaScript로 렌더링할 때 CRP (Critical Rendering Path, 중요 렌더링 경로 ) 프로세스를 사용하며 다음 단계들로 이루어진다.

1. HTML을 파싱 후, DOM 트리를 구축한다.

2. CSS를 파싱 후, CSSOM 트리를 구축한다.

3. JavaScript를 실행한다.

   • HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다.

4. DOM과 CSSOM을 조합하여 렌더트리를 구축한다.

   • display:none 속성과 같이 화면에서 보이지 않고 공간을 차지하지 않는 것을 렌더트리로 구축되지 않는다.

5. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다. ( Layout 단계 )

6. 계산한 위치 / 크기를 기반으로 화면에 그린다. ( Paint 단계 )

---

📕 용어 정리

1. CRP : 브라우저가 HTML, CSS, JavaScript를 화면에 픽셀로 변화하는 일련의 단계를 말한다. CRP는 DOM, CSSOM, 렌더 트리와 레이아웃을 포함한다.

2. DOM ( Document Object Model ) : 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리 구조로 만든 객체 모델

3. CSSOM ( CSS Object Model ) : CSS 내용을 파싱하여 자료를 구조화한 것

4. 렌더트리 ( Render Tree ) : CSSOM과 DOM 트리의 결합으로 만들어진 트리, 웹 페이지에 나타낼 각 요소들의 위치 ( Layout, 레이아웃 )을 계산하는데 사용되고 픽셀을 화면에 렌더링하는 페인트 ( Paint ) 프로세스를 위해 존재한다.

5. Layout 단계 : 뷰포트 내에서 노드의 정확한 위치와 크기를 게산하는 단계. Reflow라고도 부름

6. Paint 단계 : 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계. 페인팅 혹은 래스터화라고 부름