브라우저의 동작 원리

웹브라우저 동작 원리는 사용자가 선택한 자원(Resource)을 서버에 요청(Request)하고 서버로 부터 받은 응답(Response)을 브라우저에 렌더링한다.

1. 브라우저의 구조

• 사용자 인터페이스
  - 브라우저에서 볼 수 있는 거의 모든 것, 요청한 페이지를 보여주는 창외의 모든 ui를 의미한다.
  - 주소창, 뒤로가기, 앞으로 가기, 새로고침, 북마크, 환경설정 같은 ui가 있다.
  
  
• 브라우저 엔진
  - 사용자 인터페이스와 렌더링 엔진 사이에서 중개자 역할을 한다.
  - 인터페이스 레이어에 있는 버튼을 눌렀을 때 브라우저 엔진은 그 명령을 수행한다.
  
  
• 렌더링 엔진
  - HTML, CSS, JacaScript를 파싱하고 그 결과물을 페이지에 그려내는 역할을 한다.
• 통신
  - HTTP 요청과 같은 네트워크 호출에 사용되며, 보통 플랫폼의 독립적인 인터페이스이고 각 플랫포므이 하부에서 실행된다.
• JavaScript Interpreter
  - JavaScript 코드를 해석하고 실행하는 해석기
  - JavaScript는 코드를 위에서 아래로 한 줄 씩 읽어가는 방식으로 파싱하는 언어이기 때문에 해석기가 필요하다
  - 웹브라우저 마다 전용 자바스크립트 엔진이 탑재되어 있다. 
• UI백엔드
  - 렌더링 엔진이 분석한 Render Tree 를 부라우저에 그리는 역할
  - Select, Input창과 같은 기본적인 위젯을 그려준다.
• 자료저장소
  - 브라우저 자체에서 하드디스크와 같이 데이터를로컬에 저장하기 위한 레이어로, 쿠키나 로컬스토리지, 세션 스토리지, IndexdDB, 웹 SQL, 파일시스템 등에 접근하고 데이터를 저장하는 데 사용된다.  

2. 브라우저의 렌더링 과정

1. 브라우저는 HTML, CSS, JavaScript, 이미지 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답 받는다

 

2, 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML 과 CSS를 파싱하여 DOM과 CSSOM 을 생성하고 이들을 결합하여 렌더트리를 생성한다.

 

3. 브라우저의 JavaScript 엔진은 서버로부터 응답된 JavaScript를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행한다. 이때 JavaScript는 DOM API를 통해 DONM 이나 CSSOM을 변경할 수 있다. 

 

4. 렌더트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다. 

---

https://youtu.be/z1Jj7Xg-TkU?si=HZqaKlp-eiyCJ6v2

이해하는데 도움이 되었던 렌더링 과정 설명한 영상, 출처 : 제주코딩베이스캠프 유튜브