브라우저 동작원리

크롬 브라우저를 사용한지 아마 어연 10여년이 되는 것 같다. 

대학생 때, 그저 흔히 사용해왔던 ie 보다 디자인이 더 깔끔하고 직관적인것 같아 맘에 들어 사용하기 시작했다.

 

어연 10여년을 사용했음에도 개발자가 되기 전까지는 이 브라우저가 어떠한 원리로 동작하는지 전혀 몰랐다.

직접 배포작업들을 거치면서 웹 브라우저는 어떠한 방식으로 동작할지 살펴보게 되었다. 

 

 

---

브라우저의 주요 기능

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다.

자원은 보통 HTML 문서이지만 PDF나 이미지 또는 다른 형태일 수 있다. 

자원의 주소는 URI에 의해 정해진다.

---

브라우저 기본 구조

사용자 인터페이스

요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분을 의미한다. 예를 들면, 주소 표시줄이나 즐겨찾기 등을 말한다.

 

 

브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. HTML 문서와 기타 자원의 웹 페이지를 사용자의 장치에 상호작용적인 시각 표현으로 변환시키는 것이다.

 

렌더링 엔진

요청한 콘텐츠를 표시한다. 예를들어, HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시한다.

파이어폭스, 크롬, 사파리는 두 종류의 렌더링 엔진으로 제작되어 있다.

- 파이어폭스 : 게코엔진

- 사파리 : 웹킷

- 크롬 : 블링크

 

통신

HTTP 요청과 같은 네트워크 호출에 사용되며 이것은 플랫폼의 독립적인 인터페이스이고 각 플랫폼 하부에서 실행된다.

 

UI 백엔드

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

 

자바스크립트 해석기

자바스크립트 코드를 해석하고 실행한다.

 

자료 저장소

이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. 

HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

 

---

렌더링 엔진의 동작과정

 

1. HTML 마크업을 처리하여 DOM 트리를 생성한다.

2. CSS 마크업을 처리하여 CSSOM 트리를 생성한다.

3. DOM 트리와 CSSOM 트리를 결합하여 렌더링 트리를 생성한다.

4. 랜더링 트리 배치 : 각 노드에 대해 화면에서의 정확한 위치와 크기를 계산한다.

5. 렌더 트리 그리기 : UI 백엔드에서 렌더링 트리의 각 노드를 가로지르며 렌더링 한다.

 

이 과정들은 점진적으로 진행된다. 렌더링 엔진은 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다.

네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시한다.
이는 좀 더 나은 사용자 경험을 위한 것이다

 

웹킷 동작 과정

 

DOM의 Re-render

Element를 추가, 수정, 생성하면서 DOM이 수정되면, Render Tree생성, Layout 생성, 표시가 다시 이루어진다. 

이는 리소스가 변경될 떄마다 전체 페이지를 갱신 시킨다고 생각하면 된다.

이 문제는 SPA(Single Page Application) 형식이 탄생하고, HTML 파일 규모가 커지고 나서 더 큰 문제로 이어졌다. 

 

DOM을 사용하는 JS Version 에서는 하나의 컴포넌트가 바뀌는데 변하지 않는 요소까지 모두 바뀌는 모습을 볼 수 있다.

그 외, DOM API가 확장 되면서 문제가 많이 발생했다고 한다. 

 

 

출처 : https://ryublock.tistory.com/41

https://d2.naver.com/helloworld/59361