[ Web ] 1. 브라우저 동작 방법

브라우저의 주요 기능

브라우저는 웹 서버에 자원을 요청하고, 사용자가 볼 수 있는 형태로 출력해 주는 클라이언트 프로그램입니다. 사용자가 주소창에 URI를 입력하면 브라우저는 이를 바탕으로 서버에 요청을 보내고 다양한 자원을 받아 화면에 표시합니다.

※ URI는 자원의 식별자, URL은 자원의 위치로 URL은 URI의 하위 개념

 

자원에는 html 문서, pdf, image 등 다양한 형태를 갖추고 있으며 자원의 주소는 URI 에 의해 정해집니다.

브라우저는 html과 css 명세에 따라 html 파일을 해석해서 표시하고 해당 명세는 웹 표준화 기구인 W3C(World wide web Consortium)에서 정해집니다.

브라우저가 가진 인터페이스는 비슷한 요소들이 존재합니다.

• URI 입력하는 주소 표시 줄, 이전 및 다음 버튼, 북마크, 등
• 시간이 지나면서, 사용자에게 필요한 서비스들로 서로 모방하며 갖춰지게 된 것

 

---

 

브라우저 기본 구조

 

🔹 사용자 인터페이스

• 주소 표시줄, 이전/다음 버튼, 북마크 등 사용자가 직접 조작할 수 있는 부분

 

🔹 브라우저 엔진

• 사용자 인터페이스와 렌더링 엔진 사이에서 명령을 조정하는 중간 관리자 역할

 

🔹 렌더링 엔진

• HTML, CSS 를 파싱 하여 웹 페이지를 화면에 출력하는 핵심 컴포넌트
• 기본적으로 html, xml 문서와 이미지를 표시할 수 있음
• 추가로 플러그인이나 브라우저 확장 기능으로 pdf 등 다른 유형도 표시가 가능
• 브라우저에 따라 사용하는 엔진이 다름
  • WebKit : 크롬(초기), 사파리
  • Blink : 크롬(현재), 엣지(Chromium 기반)
  • Gecko : 파이어폭스

 

🔹 통신 모듈

• HTTP/HTTPS 요청을 통해 서버와 데이터 송수신
• AJAX 요청 등도 이 계층에서 처리
• 플랫폼의 독립적인 인터페이스로 구성되어 있음

 

🔹 UI 백엔드

• 플랫폼에서 명시하지 않은 일반적 인터페이스
• 브라우저에서 화면을 실제로 그리는 하위 레이어
• 콤보 박스 창, 버튼 같은 기본 UI요소를 OS 기반으로 그릴 때 사용

 

🔹 자바스크립트 인터프리터(JS Engine, 해석기)

• 자바스크립트 코드를 해석하고 실행
• 크롬 : V8 엔진, 파이어 폭스 : SpiderMonkey

 

🔹 자료 저장소

• 쿠키, 로컬 스토리지, 세션 스토리지 등 클라이언트에 데이터를 영구 혹은 일시 저장하는 공간

 

---

 

웹킷 동작 구조

 

렌더링 동작 과정

1. HTML 파싱 → DOM 트리 생성

• html 문서를 파싱
• 콘텐츠 트리 내부에서 태그를 모두 DOM 노드로 변환

2. CSS 파싱 → 스타일 구조체 생성

• 외부 css 파일과 함께 스타일 요소 파싱

3. 렌더 트리 생성

• 위의 스타일 정보와 html 표시 규칙은 렌더 트리로 생성

4. 렌더 트리 배치(레이아웃)

• 렌더 트리는 정해진 순서대로 화면에 표시된
• 생성 과정이 끝났을 때 배치가 진행되면서 노드가 화면의 정확한 위치에 표시됨

5. 렌더 트리 그리기(페인팅)

• UI 백엔드에서 렌더 트리의 각 노드를 가로지으며 형상을 만드는 그리기(픽셀단위로 실제 화면에 그림) 과정 진행
• 점진적으로 진행되면서 렌더링 엔진은 좀 더 빠르게 사용자에게 제공하기 위해 모든 html을 파싱 할 때까지 기다리지 않고 배치와 그리기 과정을 시작함
• 전송을 받고 기다리는 동시에 받은 내용을 먼저 화면에 보여줌 ⇒ 스트리밍 렌더링(streaming redering) 또는 페인트 스트리밍(paint streaming)

 

🔹 JavaScript의 개입 시점

JavaScript는 흐름 중 여러 지점에서 끼어들 수 있습니다.

1. HTML 파싱 중 <script> 태그를 만나면 → 파서가 멈추고 JS 실행 (렌더링 차단)
2. DOM 완성 후 → `DOMContentLoaded` 이벤트 이후 실행 가능
3. 스타일(CSSOM) 완성 후 → JS가 요소 스타일을 읽거나 변경할 때 layout 재계산 발생 가능 (리플로우)
4. 비동기 script (async, defer)를 사용하는 경우 → 렌더링과 병렬 처리 가능

※ CSSOM(CSS Object Model)은 브라우저가 CSS 파일이나 <style> 태그를 파싱해서 만든 스타일 규칙의 구조화된 객체 트리

 

🔹 파싱(parsing)

• 브라우저가 코드를 문법 규칙에 따라 분석하고 사용할 수 있는 구조로 변환하는 것
  • HTML 파싱기는 일반적으로 유연함 (태그가 누락되거나 잘못되었어도 자동 복구)
  • CSS나 JavaScript 파싱은 상대적으로 엄격하며 오류가 날 경우 무시하거나 실행 중지
• 파싱 이후에 다시 기계 코드 문서를 변환시키면 결과물이 나오게 됨
• 파서를 생성하는 것은 문법에 대한 규칙 부여 등 복잡하고 최적화하기 힘드므로, 파서 생성기 를 만이 활용함
  • 웹킷은 flex(어휘 분석기), bison(구문 분석기)을 이용해 유용하게 파싱이 가능
  • head 태그를 실수로 빠뜨려도, 파서가 돌면서 오류를 수정함(head 엘리먼트 객체를 암묵적으로 만들어줌)

 

🔹 DOM (Document Object Model : 문서 객체 모델)

• 웹 페이지 소스에서와 같은 태그들을 javascript가 활용할 수 있는 객체로 만들면 문서 객체가 됨
• DOM : 웹 브라우저가 html 페이지를 인식하는 방식(트리구조)
• 자바스크립트는 DOM을 이용해 요소를 선택, 수정, 이벤트 연결 가능

 

🔹 Attachment

• 웹킷이 렌더 트리를 생성하기 위해 DOM 노드와 스타일 정보를 연결하여 렌더 객체(Render Object) 생성
• Render Object들이 모여 렌더 트리를 구성하는데 이 과정에서 불필요한 요소는 제외되고, 실제 보여지는 요소만 구성됨

 

 

---

 

📝 요약

• 사용자가 url을 입력하면 서버에 요청 전송됨
• 해당 페이지에 존재하는 여러 자원들이 보내짐
• 브라우저가 html, css 를 W3C 명세에 따라 해석함, 이 역할은 렌더링 엔진이 수행함
  • 렌더링 엔진은 html 파싱 과정을 시작하고, html 파서가 문서에 존재하는 어휘와 구문을 분석하면서 DOM 트리를 구축
  • 다음엔 css 파싱 과정 시작하고 css 파서가 모든 css 정보를 스타일 구조체로 생성
• DOM 트리와 스타일 구조체를 연결시켜 렌더 트리로 만듦
  • 렌더 트리를 통해 문서가 시각적 요소를 포한한 형태로 구성된 상태가 됨
• 화면에 배치를 시작하고, UI 백엔드가 노드를 돌며 형상을 그림
• 빠른 브라우저 화면 표시를 위해 ‘배치와 그리는 과정’은 페이지 정보를 모두 받고 한꺼번에 진행되는 것이 아닌 자원을 전송받으면, 기다리는 동시에 일부분 먼저 진행하고 화면에 표시함