브라우저와 작동원리
✔️ 브라우저의 주요 기능
브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다.
자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수도 있고 이것은 URI에 의해 정해집니다.
브라우저는 HTML, CSS, Javascrip 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정합니다.
과거에는 브라우저들이 일부만 명세에 따라 구현하고 독자적인 방법으로 확장함으로써 웹 제작자가 심각한 호환성 문제를 겪었지만 최근에는 대부분의 브라우저가 표준 명세를 따릅니다.
✔️ 웹 브라우저와 웹 서버
📌 통신 프로세스
1. 사용자가 웹 브라우저를 통해 주소창에 도메인 주소를 입력합니다.
2. DNS 서버를 이용해 입력 도메인 주소로 서비스 되는 실제 웹 사이트의 서버 IP 주소를 찾아냅니다.
3. 사용자 컴퓨터는 서버 컴퓨터와 IP를 통해 연결되고 HTTP를 통해 웹 페이지를 요청합니다.
4. 서버 컴퓨터는 HTTP를 통해 웹 페이지를 HTML 문서 형태로 사용자의 웹 브라우저에 제공합니다.
5. 사용자의 웹 브라우저는 전달 받은 HTML 문서를 사람이 알아볼 수 있는 UI/UX 형태로 해석하여 출력합니다.
📌 웹 서버의 역할
- HTML 문서를 구성하는 각종 웹 페이지 리소스(CSS, Javascript, 이미지) 등의 공유 저장소 역할을 제공합니다.
- 공인 IP, 도메인, 저장소를 통해 24시간 안정적으로 웹 페이지를 요청자에게 제공 가능한 환경을 제공합니다.
- 웹 서버 내에서 각종 웹 페이지들로 구성된 다양한 웹 사이트를 구축하고 동시에 서비스를 제공합니다.
📌 웹 브라우저의 역할
- 서버에서 전달된 코드 형태의 HTML 문서를 해독하는 해석기 역할을 합니다.
- 웹 브라우저를 통해 해석된 코드는 사람이 쉽게 보고 이해할 수 있는 형식으로 화면에 표시합니다.
- HTML, CSS, Javascript 코드가 실제 실행되고 해석되는 환경(런타임 환경)을 제공합니다.
- 서버에서 제공하는 특정 웹 페이지를 요청할 수 있으며 관련 리소스를 전달 받아 사람이 이해하기 힘든 각종 코드 형태의 HTML 문서내용을 해석(인터프리팅)하여 사람이 쉽게 보고 이해할 수 있는 형태로 표현하고 상호작용 할 수 있는 웹페이지의 실행 환경(런타임 환경)을 제공합니다.
✔️ 브라우저의 기본 구조
- 사용자 인터페이스
주소 표시줄, 이전/다음 버튼, 북마크 매뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분입니다.
- 브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다.
브라우저라는 프로그램의 비즈니스 로직, 핵심 중추 부분입니다.
자료 저장소를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 합니다.
- 렌더링 엔진
요청한 콘텐츠를 표시합니다. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시합니다.
- 통신
플랫폼 독립적인 인터페이스로 플랫폼 하부에서 HTTP 요청과 같은 네트워크 호출에 사용됩니다.
- UI 백엔드
Render Tree를 브라우저에 그리는 역할을 담당합니다.
- 자바스크립트 해석기
자바스크립트 코드를 해석하고 실행합니다.
- 자료 저장소
자료를 저장하는 계층으로 쿠키나 로컬 스토리지, Indexed DB 등의 자료가 저장되는 저장소입니다.
이는 하드디스크에 저장되며 HTML 명세 등도 이곳에 저장됩니다.
✔️ 렌더링 엔진
브라우저 별로 가지고 있으며, 여러 종류가 존재합니다. 따라서 동작하는 원리도 세세한 부분은 다릅니다.
렌더링 엔진의 역할은 요청받은 내용을 브라우저 화면에 표시하는 일입니다.
📌 브라우저 렌더링 프로세스
1. 사용자가 사용자 인터페이스의 주소표시줄에 URI을 입력하여 브라우저 엔진에 전달합니다.
2. 브라우저 엔진은 자료 저장소에서 URL에 해당하는 자료를 찾고 그 자료를 렌더링 엔진에 전달합니다.
(자주 받아오는 데이터는 효율적으로 하기 위해 자료 저장소에 저장하는데 이를 캐싱 기법이라 합니다.)
3. 렌더링 엔진은 브라우저 엔진에서 가져온 자료(HTML, CSS, image 등)를 분석합니다.
동시에 URI 데이터를 통신, 자바스크립트 해석기, UI 백엔드로 전파합니다.
(자료 저장소에 없는 처음 받아오는 데이터가 있을 경우 브라우저 엔진이 통신에게 URI을 전달합니다.)
4. 또한 렌더링 엔진은 통신에 URI에 대한 추가 데이터가 있다면 이를 요청하고 응답할 때까지 기다립니다.
5. 응답 받은 데이터에서 HTML, CSS는 렌더링 엔진이 파싱합니다.
6. 응답 받은 데이터에서 Javascript는 자바스크립트 해석기가 파싱합니다.
7. 자바스크립트 해석기는 파싱한 결과를 렌더링 엔진에 전달하여 3, 5번에서 파싱한 결과인 DOM tree를 구축합니다.
8. 구축이 완료된 DOM node(DOM tree의 구성요소)는 Render object(Render tree 구성요소)로 변합니다.
9. UI 백엔드는 Render object를 브라우저 렌더링 화면에 띄워줍니다.
📌 렌더링 엔진 동작 과정
- DOM tree 구축을 위한 HTML parsing, CSS, Javascrip parsing
HTML 문서를 파싱한 후 content tree 내부에서 tag(a, div)를 DOM node로 변환합니다.
그 다음 CSS 파일과 함께 모든 스타일 요소를 파싱합니다.
스타일 요소와 HTML 표시 규칙, Javascrip의 파싱 결과물은 Render tree를 생성합니다.
- Render tree 구축
Render tree는 색상 또는 면적 등 시각적 속성을 갖는 사각형을 포함하여 정해진 순서대로 구축합니다.
- Render tree 배치
Render tree의 구축이 끝나면 각 node를 정확한 위치에 표시되기 위해 이동하며 배치합니다.
- Render tree 그리기
각 node 배치를 완료하면 UI 백엔드에서 각 node를 가로지르며 paint 작업을 합니다.
📌 webkik을 예시로 알아보기
1. DOM(Document Object Model)) tree 구축
브라우저는 서버로부터 HTML 문서를 모두 전달 받습니다.
어휘와 구문을 분석하여 HTML 문서를 파싱하고, 파싱 트리를 생성합니다.
문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미합니다.
파싱 트리를 기반으로 DOM 요소와 속성 노드를 가지는 DOM tree를 생성합니다.
2. CSSOM(CSS Object Model) tree 구축
DOM tree를 생성할 때 거쳤던 과정을 그대로 CSS에 반복합니다.
그 결과로 브라우저가 이해하고 처리할 수 있는 형식(Style Rules)으로 변환됩니다.
3. Render tree(DOM + CSSOM) 구축
Dom tree가 구축 되어가는 동안 브라우저는 DOM tree를 기반으로 Render tree를 생성합니다.
문서를 시각적인 구성 요소로 만들어주는 역할을 합니다.
4. Render tree 배치
Render tree는 위치와 크기를 가지고 있기 때문에 객체들에게 위치와 크기를 결정해줍니다.
5. Render tree 그리기
Render tree의 각 노드를 화면의 픽셀로 나타내고 그리기가 완료되면 화면에 콘텐츠가 표현됩니다.