[CS] 브라우저 (Browser)

브라우저 (Browser)

  - 사용자가 웹을 통해 인터넷 상의 정보에 접근할 수 있도록 하는 소프트웨어

  - HTML, CSS, JavaScript를 해석하여 웹페이지를 렌더링함

  - 사용자와 웹 서버 간의 게이트웨이 역할

     · 사용자가 입력한 요청을 HTTP 프로토콜을 통해 서버로 전달함

     · 서버에서 반환된 응답을 해석하여 화면에 표시함

 

 

---

# 주요 구성 요소

1) 사용자 인터페이스 (UI, User Interface)

   - 브라우저 화면에서 사용자와 상호작용하는 영역

   - 사용자의 입력을 받아 다른 구성요소와 연결함

   ex) 주소 입력창, 북마크, 뒤로가기 버튼 등

 

2) 렌더링 엔진 (Rendering Enging)

   - HTML, CSS, JavaScript를 해석하고 웹페이지를 브라우저 창에 렌더링함

   [작동 방식]

      i. HTML, CSS를 파싱하여 DOM과 CSSOM을 생성함

      ii. Render Tree를 생성함

      iii. 레이아웃 계산 (요소 위치 및 크기 결정)

      iv. 화면에 그리기

 

3) 브라우저 엔진 (Browser Engine)

   - UI와 렌더링 엔진 간의 중간 관리자 역할

      : 명령을 받아 렌더링 엔진에 전달하고, 렌더링 엔진이 처리한 결과를 UI로 반환함

 

4) 자바스크립트 엔진 (JavaScript Engine)

   - 브라우저에서 자바스크립트 코드를 실행하는 엔진

   - 비동기 작업 처리

   - 이벤트 루프와 콜백 처리

   - DOM, CSSOM에 변경사항을 적용하여 렌더링 재작업

 

5) 네트워킹 (Networking)

   - 웹 서버와의 통신을 담당함

      : HTTP(s) 요청을 보내고, 서버로부터 응답을 받는 역할

   - DNS 조회를 통해 서버 IP 주소 확인

   - 네트워크 보안 관리

      : CORS 정책, 보안 인증서 검증 등

   - 네트워크 계층에서 데이터를 처리함

 

6) 데이터 저장소 (Storage)

   - 브라우저가 데이터를 로컬에 저장하기 위한 공간

   [주요 저장소]

     i) 쿠키

        · 간단한 텍스트 데이터 저장

        · https://young0105.tistory.com/160

     ii) LocalStorage

        ·  key-value 쌍 형태의 데이터 저장 (영구적)

     iii) SessionStorage

        · 브라우저 세션 동안만 유지

     iv) IndexedDB

        · 대용량 데이터 저장용 NoSQL 데이터베이스

     v) 캐시

        · 자주 사용하는 리소스를 로컬에 저장하여 로딩 속도를 개선함

 

 

---

# 동작 과정

1. URL 입력

   i. 사용자가 주소창에 URL을 입력함

   ii. 브라우저가 이 정보를 통해 DNS 요청을 보내서 IP 주소를 찾음

 

2. HTTP 요청/응답

   i. 브라우저가 서버에 HTTP(S) 요청을 보냄

   ii. 서버로부터 HTML 문서 응답을 받음

   - SSL 인증서 확인 및 CORS 정책 검증

   - '데이터 저장소'에 캐시된 리소스가 존재한다면, 이를 로드해 네트워크 요청을 줄임

 

3. HTML 파싱 및 렌더링

   i. HTML 파싱 : HTML 문서를 읽어 DOM 생성

   ii. CSS 파싱 : CSSOM를 생성

   iii. Render Tree 생성 : DOM과 CSSOM이 결합된 Render Tree 생성

   iv. 레이아웃 : Render Tree의 각 요소에 대해 위치/크기 계산

   v. 페인팅 : 레이아웃 정보를 바탕으로 각 요소를 픽셀 단위로 화면에 그림

   - 외부 리소스(CSS, JS)를 요청할 경우 '네트워킹'에 전달하여 실행함

 

   ※ 렌더 트리 (Render Tree)

      · 브라우저가 HTML/CSS를 파싱하여 화면에 그리기 위해 생성하는 시각적 표현 모델

      · 화면에 표시될 요소들만 포함함

      · 각 요소의 스타일과 레이아웃 정보를 담고 있음

 

4. JavaScript 실행

   - HTML 파싱 중 <script>를 만나면 '자바스크립트 엔진'에 전달하여 실행함

      → 이후 DOM or CSSOM에 영향을 주면 다시 렌더링 과정이 발생함

 

5. 사용자의 입력 처리

   - 사용자가 클릭, 스크롤 등을 수행하면 이벤트가 발생하고, JS에서 이를 처리함