브라우저의 동작 방식

브라우저의 주요 기능

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.

브라우저의 주요 구성 요소

1. 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분

2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

3. 렌더링 엔진 : 요청한 콘텐츠를 표시. ex) HTML, CSS 파싱하여 화면에 표시

4. 통신 : HTTP 요청과 같은 네트워크 호출에 사용된다. 플랫폼 독립적인 인터페이스로 각 플랫폼 하부에서 실행된다.

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

6. 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행

7. 자료 저장소: 자료를 저장

렌더링 엔진

• 파이어폭스는 모질라에서 직접 만든 게코(Gecko) 엔진을 사용 / 사파리와 크롬은 웹킷(Webkit) 엔진을 사용
  • 가끔 css를 적용할 때, webkit- 이런식으로 할 때가 있었는데, 이게 렌더링 엔진을 얘기하는 것이라니...!

브라우저의 렌더링 과정

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

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

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

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

---

출처 및 참고
브라우저는 어떻게 동작하는가?
poiemaweb
모던 자바스크립트 Deep Dive 책
이미지 출처 : poiemaweb