[Internet] 웹 브라우저란? 동작 기본 흐름

html, sss, js

html : 웹 페이지의 구조를 명시한 문서

css : 웹 페이지를 꾸미는 스타일 문서

js : 웹페이지의 html 요소(div, button, li...)를 조작하는 프로그래밍 언어

 

DOM(Document Object Model)

HTML 요소를 조작하기 위한 API.

 

document = html document.

브라우저는 html 문서에 명시한 html 요소들을 실제로 조작할 수 있는 객체로 실체화한다.

이 실체화한 객체들을 조작할 수 있도록 제공된 API 를 DOM 이라고 하는 것.

따라서 라이브러리만 갖추면 어떤 언어든 DOM을 조작할 수 있음. 보통은 js 로 DOM 을 조작함.

 

html 문서를 보면, html 요소안에 하위 요소, 그 안의 하위 요소... 로 명시되어 있음.

이 형태가 트리 같아서 DOM 트리라고 함.

 

DOM의 객체(실체화된 html 요소)를 Node 라고 한다.

Node 는 클릭, 버튼 등 조작할 수 있는 이벤트 메소드들이 정의되어 있는 추상 클래스 비스무리한 것...

html 요소들이 실체화될 때, 이 Node 를 상속받음.

 

CSS는 CSSOM(CSS Object Model) 이란 걸로 따로 만들어짐.

브라우저를 조작하는 API인 BOM(Browser Object Dom)도 있음. (locaiton, navigation, alter, window...)

 

웹 브라우저란?

웹서버와 통신하여 html, css, js, 텍스트, 이미지 등 웹 리소스를 받아 사용자에게 보여주는 그래픽 사용자 인터페이스(GUI) 기반의 소프트웨어.

즉, 웹을 보여주는 프로그램.

대표적인 웹 브라우저로는 크롬, IE, 파이어폭스, 사파리, 오페라가 있다.

 

브라우저 구조

출처 : html5rocks

• User Interface : 주소 표시줄, 북마크 메뉴 등.
• Browser engine : 사용자 인터페이스와 렌더링 엔진 사이 동작 제어
• Rendering engine : 받아온 데이터를 UI 상에 표시. (HTML 파일을 받아왔다면, html 및 css 구문을 분석하고 분석된 콘텐츠를 화면에 표시)
• Networking layer : 웹서버와 네트워크 통신. 플랫폼 독립적으로 동작.
• UI Backend layer : 콤보박스, 창 같은 기본적인 위젯을 그림. OS 사용자 인터페이스 체계를 사용.
• JavaScript Interpreter : js 코드를 파싱하고 실행함
• Data Storage : 쿠키 같은 로컬 데이터를 저장하는 곳. 브라우저는 localStorage, IndexedDB, WebSQL, FileSystem 과 같은 저장소 지원.

 

브라우저가 html 파일을 띄우는 과정

url을 입력하여 해당 웹서버에게 데이터를 요청함.

보통, 먼저 시작점이 되는 index.html 를 다운받고 head 부분에 추가로 요청하는 js, css, 이미지, 외부소스 등을 다운받음.

브라우저의 렌더링 엔진은 전달받은 html 문서를 받아 아래와 같이 실행시킴.

 

출처 : html5rocks

1. html 파싱하여 DOM 트리로 만듦 : 각 요소를 DOM node 로 변환
2. Render 트리 만듦 : css/style data 를 파싱(CSSOM)하고 DOM 과 CSSOM 을 합쳐 render tree 로 변환.
3. Render 트리 배치(layout) : 각 node 를 화면의 정확히 어디 위치에 배치(layout) 시킬지 표시. (게코 엔진에서는 리플로우라고 함)
4. Render 트리 painting : node 들이 레이아웃에 따라 UI 백엔드에 의해 그려짐.

 

렌더링 엔진은 웹페이지를 사용자에게 빨리 보여주기 위해 모든 html 요소를 파싱할 때까지 기다리지 않고 배치와 painting 과정을 시작함.

나머지 내용이 전송되는걸 기다리면서 동시에 일부를 화면에 출력하는 것.

 

*dom 트리와 render 트리 참고

출처 : google developers

 

렌더링 엔진은 브라우저들마다 동작 방식이 다르지만, 기본 흐름은 비슷함.

출처: 네이버D2 / webkit 엔진

출처: 네이버D2 / geako 엔진

 

---

 

참고) 

네트워크 탭을 열어보면 데이터를 어떻게 받아오는지 볼 수 있다.

191 개의 파일을 받았고, 총 2.3mb 를 전송받았는데 실제 웹페이지의 리소스는 6.0mb 사이즈이다.

이는 전송받을 때 압축되어 오는 파일이 있기 때문이다.

finish 는 다운로드 완료 시간. html 로드 시간은 735ms, 웹페이지 렌더링 완료 시간은 859ms 이다.